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

来源：互联网发布：光子脱毛知乎编辑：程序博客网时间：2024/05/13 08:00

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

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

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

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

阅读全文

0 0