（17）用户注册信息校验：正则表达式

最新推荐文章于 2023-06-03 22:40:52 发布

FixedStarHaHa

最新推荐文章于 2023-06-03 22:40:52 发布

阅读量1.2k

点赞数 1

分类专栏： DOM 文章标签：用户体验正则表达式对象体验

本文链接：https://blog.csdn.net/jiangshangchunjiezi/article/details/76985288

版权

DOM 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、用户名校验
在用户注册网站时，应该用户写完每条信息后，就校验是否正确，这样有助于上网体验，若提交给服务器再校验，若出错较多，增加了服务端的负担而且用户体验差。

用户写完一条信息就校验，校验是个事件，是onblur事件：当对象失去输入焦点时触发，即用户输入完此条信息，此焦点失去时校验。

进行字符串校验，应该想到正则表达式。
Js对象正则表达式对象、RegExp对象
创建正则表达式的两种方式：
①re=/^[a-z]{4} $/ ②re=new RegExp(“^[a-z]{4}$ ”,i);
这两种方式一般情况下都可以，但是若遇到\d,re=/^\d{4} $/(没字符串不用转义) re=new RegExp(“^\d{4}$ ”,i);(字符串需要对\进行转义)
③若只是判断是否匹配，返回的是boolean，应该用regexp.test(str);
stringObj.match(rgExp):返回包含查找结果的数组（至少在校验中不常用）
div标签是带回车的标签，span是不带回车的标签，若想要多个标签的内容在一行显示，应该用span（应用场景是校验结果或者购物总金额…..）

二、表单提交
①提交数据会用到注意只用的是submit对象，而不是简单的button对象
②表单的信息按照要求输入正确，才允许提交，否则不会提交给服务器，
用到了form中的onsubmit事件，注意其格式为οnsubmit=”return 是否校验正确的函数”

<body>
<script type="text/jscript">
   function checkUser()
   {
       var flag;//根据用户名判断是否将表单提交给服务器，在checkForm中会用这个返回值
       //获取用户名节点
       var userNode=document.getElementsByName("user")[0];

       //获取span节点
       var spanNode=document.getElementById("userspan");

       var userName=userNode.value;
       var regexp=new RegExp("^[a-z]{4}$");//用户名规则：4个字母
       if(regexp.test(userName))
       {
         spanNode.innerHTML="用户名正确";
         flag=true;
       }
       else
       {
           spanNode.innerHTML="用户名错误";
           flag=false;
       }

       return flag;
   }

   function checkForm()
   {

       if(checkUser())
           return true;
       return false;
   }
   function mySubmit()
   {
       //获取表单节点
       var oFormNode=document.getElementById("userinfo");

       oFormNode.submit();

   }
</script>
    <form id="userinfo" onsubmit="return checkForm() ">
      用户名称：<input type="text" name="user" value="" onblur="checkUser()"/>
      <span id="userspan"></span><br/>
      输入密码：<input type="password" name="psw" value=""/>
      <span id="pswspan"></span><br/>
      <input type="submit" value="提交数据" />
     </form>
     <hr/>
     <input type="submit" value="我的提交" onclick="mySubmit()" />
</body>

三、对多个文本框进行校验
其实无论是校验密码还是校验用户名，其校验过程都是相同的：
①获得要校验的节点，然后获得其值
②获取写校验结果的span节点
③正则规则
④对其校验，并且要有校验结果正确的span值，和校验错误的span值
若校验项较多，可以将上面的5个值作为参数传递到校验函数中

代码：用户注册信息校验
注意确认密码是确认两次输入的密码一致，不必确定格式

<body>
<script type="text/jscript">
   /*function checkUser()
   {
       var flag;//根据用户名判断是否将表单提交给服务器，在checkForm中会用这个返回值
       //获取用户名节点
       var userNode=document.getElementsByName("user")[0];

       //获取span节点
       var spanNode=document.getElementById("userspan");

       var userName=userNode.value;
       var regexp=new RegExp("^[a-z]{4}$");//用户名规则：4个字母
       if(regexp.test(userName))
       {
         spanNode.innerHTML="用户名正确";
         flag=true;
       }
       else
       {
           spanNode.innerHTML="用户名错误";
           flag=false;
       }

       return flag;
   }*/
   function check(name,spanid,reg,rightinfo,errorinfo)
   {
       var flag;
       //根据name获取要校验的节点
       var nameNodeVal=document.getElementsByName(name)[0].value;

       //获取span节点
       var spanNode=document.getElementById(spanid);

       //进行校验
       if(reg.test(nameNodeVal))
        {
            spanNode.innerHTML=rightinfo;
            flag=true;
        }
        else
        {
            spanNode.innerHTML=errorinfo;
            flag=false;
        }
        return flag;
   }

   function checkuser()
   {
       reg=/^[a-z]{4}$/i;
       return check("user","userspan",reg,"用户名正确","用户名错误");   
   }
    function checkpsw()
   {
       reg=/^[0-9]{4}$/;
       return check("psw","pswspan",reg,"密码格式正确","密码格式错误");   
   }
    function checkrepsw()
   {
       //确认密码并不需要确认格式，只需要两次密码一致即可

       //1，获取第一次输入的密码值
       var PswVal=document.getElementsByName("psw")[0].value;

       //2，获取确认密码的值
       var rePswVal=document.getElementsByName("repsw")[0].value;

       //3.获取确认密码的span
       var respanNode=document.getElementById("repswspan");

       //判断两个值是否相同
       if(PswVal==rePswVal)
       {
           respanNode.innerHTML="两次密码一致";
           flag=true;

       }
       else
       {
           respanNode.innerHTML="两次密码不一致";
           flag=false;
       }
       return flag;

   }
   function checkmail()
   {
       reg=/^\w+@\w+(\.\w+)+$/i;
       return check("mail","mailspan",reg,"邮箱格式正确","邮箱格式错误");   
   }
   function checkForm()
   {
      alert(checkuser()+"---"+checkuser()+"---"+checkrepsw()+"---"+checkmail());
       if(checkuser()&&checkuser()&&checkrepsw()&&checkmail())
           return true;
       return false;
   }

</script>
    <form id="userinfo" onsubmit="return checkForm() ">
      用户名称：<input type="text" name="user" value="" onblur="checkuser()"/>
      <span id="userspan"></span><br/>

      输入密码：<input type="password" name="psw" onblur="checkpsw()"/>
      <span id="pswspan"></span><br/>

      确认密码：<input type="repassword" name="repsw" onblur="checkrepsw()"/>
      <span id="repswspan"></span><br/>

      输入邮箱：<input type="text" name="mail"onblur="checkmail()" />
      <span id="mailspan"></span><br/>
      <input type="submit" value="提交数据" />
     </form>
     <hr/>

</body>
</html>