Tutoriel sur le formulaire de vérification du développement JS - formulaire de vérification (4)
Dans la section précédente, nous avons parlé du contrôle de la longueur des noms d'utilisateur
Voyons maintenant comment contrôler le format du mot de passe et l'adresse e-mail via les expressions régulières js
Même si vous Je ne sais pas comment écrire des expressions régulières Les expressions n'ont pas d'importance De nos jours, vous pouvez trouver de nombreuses expressions régulières prêtes à l'emploi pour les adresses e-mail
Jetons un coup d'œil au mot de passe. vous n'avez besoin que d'un mot de passe composé d'une combinaison de chiffres et de lettres et devant contenir entre 6 et 10 caractères
var rel = /^[a-zA-Z0-9]{6,10}$/ ;
Jetons un coup d'œil à l'expression régulière de la boîte aux lettres
var reg = /^w+((-w+)|(.w+))*@[A-Za-z0-9]+ ((.|-)[A-Za-z0-9]+)*.[A-Za -z0-9]+$/;
Nous avons terminé l'expression régulière, alors comment vérifier notre formulaire?
Nous voulons obtenir la valeur de la zone de texte, puis la faire correspondre avec notre expression régulière. Si elle correspond, elle est conforme à la spécification. Si elle ne correspond pas, un message d'invite sera envoyé.
Ici, nous utiliserons la méthode test()
La méthode test() est utilisée pour récupérer si une chaîne correspond à un certain modèle
Vérifions le mot de passe, qui est un combinaison de chiffres et de lettres
var rel = /^[A-Za-z0-9]{6,10}$/;
var val1 = document.getElementById('pwd').value;
if(val1 == ""){
document.getElementById("sp1").innerHTML = "Veuillez saisir votre mot de passe !";
}else if(!rel.test(val1)){
document.getElementById("sp1").innerHTML = " Le mot de passe n'est pas conforme à la spécification ! ";
}
Avec le code ci-dessus, nous avons terminé la vérification du mot de passe
Regardons la méthode de vérification de l'adresse e-mail, qui est en fait similaire à la méthode de vérification du mot de passe
var reg = /^w+((-w+)|(.w+)) *@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+) *.[A-Za-z0-9]+$/;
var val2 = document.getElementById('email').value; ("sp2").innerHTML = "Veuillez entrer votre adresse e-mail !";
}else if(!reg.test(val2)){
document.getElementById ("sp2").innerHTML = "Le format email est incorrect ! ";
}
Avec le code ci-dessus, nous avons complété la fonction de vérification de l'adresse email
Le complet le code est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
#div{width:410px;height:400px;background:#46a3ff;padding-left:16px;
padding-top:20px;}
input{
outline:none;
box-sizing:border-box;padding-left:15px;}
textarea{
outline:none;resize : none;
box-sizing:border-box;padding-left:15px;padding-top:5px;}
.name{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
.pwd{width:200px;height:30px;
margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
.email{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
.txt{
width:280px;height:70px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
.sub{width:100px;height:30px;padding-left:0px;
border:none;
border-radius:5px;background:#ffd0ff;}
.sub:hover{background:#ffaad5;}
.div{
width:200px;height:30px;margin:0 auto;box-sizing:border-box;padding-left:45px;padding-top:5px;color:#8600ff;font-weight:bold;}
</style>
</head>
<body>
<div id="div">
<form>
<label>用户名:</label>
<input type="text" class="name" id="name">
<div id="sp" class="div"></div>
<label>密 码:</label>
<input type="password" class="pwd" id="pwd">
<div id="sp1" class="div"></div>
<label>邮 箱:</label>
<input type="text" class="email" id="email">
<div id="sp2" class="div"></div>
<label>爱 好:</label>
<textarea rows="5" cols="40" class="txt" id="txt"></textarea>
<div id="sp3" class="div"></div>
<input type="button" class="sub" value="注册" id="sub">
</form>
</div>
<script type="text/javascript">
var sub = document.getElementById('sub');
sub.onclick=function(){
//验证用户名是否为空,如果为空，给出提示信息
var val = document.getElementById('name').value;
var rel = document.getElementById('name').value.length;
//console.log(val.length);
if(val == ""){
document.getElementById("sp").innerHTML = "用户名不能为空！";
}else if( rel <= 5 || rel > 10){
document.getElementById("sp").innerHTML = "格式不正确！";
}
var rel = /^[A-Za-z0-9]{6,10}$/;
var val1 = document.getElementById('pwd').value;
if(val1 == ""){
document.getElementById("sp1").innerHTML = "请输入密码！";
}else if(!rel.test(val1)){
document.getElementById("sp1").innerHTML = "密码不符合规范！";
}
//验证邮箱是否为空和邮箱的格式是否正确
var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
var val2 = document.getElementById('email').value;
if(val2 == ""){
document.getElementById("sp2").innerHTML = "请输入邮箱！";
}else if(!reg.test(val2)){
document.getElementById("sp2").innerHTML = "邮箱格式不正确！";
}
//验证内容是否为空
var val3 = document.getElementById('txt').value;
if(val3 == ""){
document.getElementById("sp3").innerHTML = "请输入内容！";
}
}
//当用户名的文本框触发键盘事件，提示信息去除
document.getElementById('name').onkeyup=function(){
document.getElementById('sp').innerHTML = " ";
}
// //当密码框触发键盘事件，提示信息去除
document.getElementById('pwd').onkeyup=function(){
document.getElementById('sp1').innerHTML = " ";
}
// //当邮箱文本框触发键盘事件，提示信息去除
document.getElementById('email').onkeyup=function(){
document.getElementById('sp2').innerHTML = " ";
}
// //当文本域触发键盘事件，提示信息去除
document.getElementById('txt').onkeyup=function(){
document.getElementById('sp3').innerHTML = " ";
}
</script>
</body>
</html>
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
