这样写得正则可以么?

来源:4-8 编程练习

慕勒8294007

2019-11-07 10:51:51

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
     *{margin: 0;padding: 0}
     h1{line-height:50px;background-color: #2aabd2}
      .bidan{width:600px; margin: 100px auto;}
label{display: inline-block;width: 200px;height: 40px;text-align:right}
       #anniu{
           margin: auto;width: 600px;}
       #bit{width: 40px;height: 30px;background-color: #2aabd2;margin-left: 250px;}
   </style>
</head>
<body style="background-color: gray">
<h1>未注册</h1>
<div class="bidan">
   <p><label>用户名:</label><input type="text" value="" id="yhm"><span id="yhm1"></span></p>
   <p><label>登入密码:</label><input type="password" value="" id="mm"><span id="mm1"></span></p>
   <p><label>确认密码:</label><input type="password" value="" id="qrm"><span id="qrm1"></span></p>
   <p><label>姓名:</label><input type="text" value="" id="xm"><span id="xm1"></span></p>
   <p><label>性别:</label><select><option>男</option><option>女</option></select></p>
   <p><label>省份证号:</label><input type="text" value="" id="sfz"><span id="sfz1"></span></p>
   <p><label>邮箱:</label><input type="text" value="" id="yx"><span id="yx1"></span></p>
   <p><label>手机号码:</label><input type="text" value="" id="sjh"><span id="sjh1"></span></p>

</div>
<div id="anniu"><input type="button" value="提交" id="bit" ></div>
<script>
   var yhm=document.getElementById("yhm"); var yhm1=document.getElementById("yhm1");
   var mm=document.getElementById("mm"); var mm1=document.getElementById("mm1");
   var qrm=document.getElementById("qrm"); var qrm1=document.getElementById("qrm1");
   var xm=document.getElementById("xm"); var xm1=document.getElementById("xm1");
   var sfz=document.getElementById("sfz"); var sfz1=document.getElementById("sfz1");
   var yx=document.getElementById("yx"); var yx1=document.getElementById("yx1");
   var sjh=document.getElementById("sjh"); var sjh1=document.getElementById("sjh1");
   var bit=document.getElementById("bit");
   var test=false;
   var test1=false;
   var test2=false;
   var test3=false;
   var test4=false;
   var test5=false;
   var test6=false;
yhm.onblur=function () {
   var reg=/^[a-zA-Z]+\w{6,18}$/;
   if(this.value == ""){
       yhm1.innerHTML="用户名称不能为空";
       yhm1.style.color="red";
   }else {if(!reg.exec(yhm.value)){yhm1.innerHTML="请输入6-18数字、字母";
       yhm1.style.color="red";}
       else {yhm1.innerHTML="ok";
       yhm1.style.color="green";
       test=true}
   }
};
mm.onfocus=function () {
   mm1.innerHTML="请输入密码";
   mm1.style.color='green';
};
mm.onblur=function(){
   var reg=/^\w{6,18}$/;
   if(mm.value==''){
       mm1.innerHTML="密码不能为空";
       mm1.style.color='red';
   }
   else{
       if(!reg.test(this.value))
       {mm1.innerHTML="输入得密码格式错误";
           mm1.style.color='red';}
       else {mm1.innerHTML="ok";
           mm1.style.color="green";
           test1=true}
   }
};

   qrm.onfocus=function () {
       qrm1.innerHTML="输入密码";
       qrm1.style.color='green';
   };
   qrm.onblur=function() {
       if(this.value==""){qrm1.innerHTML="密码不能为空";qrm1.style.color='red';}
       else {if(!this.value==mm.value){qrm1.innerHTML="密码输入不一致";qrm1.style.color='red';}
       else {qrm1.innerHTML="ok";qrm1.style.color='green';test2=true}}};


   xm.onfocus=function () {
       xm1.innerHTML="输入姓名";
       xm1.style.color='green';
   };
   xm.onblur=function(){
       var reg=/^[\u4e00-\u9fa5]{2,5}$/;
       if(this.value==''){
           xm1.innerHTML="不能为空";
           xm1.style.color='red';
       }
       else{
           if(!reg.test(this.value))
           {xm1.innerHTML="输入中文";
               xm1.style.color='red';}
           else {xm1.innerHTML="ok";
               xm1.style.color="green";
               test3=true}
       }
   };
   sfz.onfocus=function () {
       sfz1.innerHTML="输入身份证号";
       sfz1.style.color='green';
   };
   sfz.onblur=function () {
       var reg=/^[\d]{17}[0-9x]$/;
       if(this.value==""){sfz1.innerHTML="不能为空";sfz1.style.color="red"}
       else {if(!reg.test(this.value)){sfz1.innerHTML="输入得身份证号码有误";sfz1.style.color="red";}
       else {sfz1.innerHTML="ok";sfz1.style.color='green'; test4=true;}
       }
   };
yx.onfocus=function () {
   yx1.innerHTML="请输入邮箱";yx1.style.color='green';
};
yx.onblur=function () {
   var reg=/^\w+@\w+\.[a-zA-Z]{2,4}$/;
   if(this.value==''){yx1.innerHTML='邮箱不能为空';yx1.style.color="red"}
   else {if(!reg.test(this.value)){yx1.innerHTML="邮箱格式不正确";yx1.style.color="red"}else
   {yx1.innerHTML="ok";yx1.style.color="green";test5=true;}
   }
};
sjh.onfocus=function () {
  sjh1.innerHTML="请输入手机号";sjh1.style.color="green";
};
sjh.onblur=function () {
   var reg=/^\d{11}$/;
   if(this.value==""){sjh1.innerHTML="手机号不能为空";sjh1.style.color="red"}
   else {
       if(!reg.test(this.value)){sjh1.innerHTML="手机号码格式不对";sjh1.style.color="red"}
           else{
               sjh1.innerHTML="ok";sjh1.style.color="green";test6=true;
           }
       }
   };
bit.onclick=function () {
   if(test==true||test1==true||test2==true||test3==true||test4==true||test5==true){
       alert("提交成功")
   }else (alert("信息不正确,请重新填写"))
}




</script>
</body>
</html>

写回答

1回答

好帮手慕粉

2019-11-07

同学你好,

1、验证身份证号的正则有一点问题哦,练习要求的是可以输入15位或者18位,同学的只能输入18位哦,参考:

http://img.mukewang.com/climg/5dc3cf6d0982c83507150110.jpg

2、邮箱的正则不太正确哦,没有验证如下格式的:

http://img.mukewang.com/climg/5dc3d00f0905c6c904370054.jpg

建议参考:http://img.mukewang.com/climg/5dc3d04009256dfc08960166.jpg

3、手机号的正则不正确,验证的规则比较少,当我第二位输入2时,也能验证正确,而实际中是没有这种手机号的:

http://img.mukewang.com/climg/5dc3d15d09b3847003730058.jpg

手机号的详细规则同学可以参考练习要求哦,正则参考:

http://img.mukewang.com/climg/5dc3d13a0974fbfa09330175.jpg

4、建议同学优化一下整体的界面样式哦,尽量调的美观一些,也顺带练习一下css的知识。

希望我的回答能够帮助到你,望采纳,祝学习愉快!

0

0 学习 · 14456 问题

查看课程