Javascript-网页编程-DHTML-表单验证技术(正则表达式)

最新推荐文章于 2022-04-18 20:00:57 发布

夏小弥

最新推荐文章于 2022-04-18 20:00:57 发布

阅读量374

点赞数 1

分类专栏： html网页编程文章标签： javascript dhtml html 正则表达式表单

本文链接：https://blog.csdn.net/x121850182/article/details/51919682

版权

html网页编程专栏收录该内容

15 篇文章 0 订阅

订阅专栏

正则表达式的应用（用户注册）

通过正则表达式实现用户注册页面

1、正则表达式定义法1

var reg = /^[0-9]{6}$/; //必须是6个数字，而且必须是6个。多了或少了都不行。

2、正则表达式定义法2

var reg = new RegExp("^[0-9]{6}$");

3、细节
var reg = new RegExp("[a-z]{4}","i");//带参数，只要包含连续4个字母就行，忽略大小写

var reg = new RegExp("^[a-z]{4}","i");//带参数，必须以连续4个字母开始，忽略大小写

var reg = new RegExp("^[a-z]{4}$","i");//带参数，有且只有连续4个字母，忽略大小写

var reg = / ^\d{6}$ /; //特殊符号不需要转义，外面也不用加引号

var reg = /^[\d\w]{6,9}$/; //只包含6到9个数字或字符，这里不需要转义

3、表单的提交

例：(手动提交，不依赖于form中的submit)

[java]view plaincopy 
   
 <script type="text/javascript">  
             function mySubmit(){  
                 var oFormNode=document.getElementById("submitInfo");  
                 if (checkUser()){  
                     oFormNode.submit();  
                 }  
             }  
 </script>  

4、实例：

[java]view plaincopy 
   
 <html>  
   <head>  
     <title>DHTML技术演示---注册表单的验证且控制提交--前端校验--最终版本</title>  
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
      <script type="text/javascript">  
         function check(name,reg,spanId,okInfo,errInfo){  
             var value = document.getElementsByName(name)[0].value;  
             //用正则检验  
             var oSpanNode = document.getElementById(spanId);  
             if(reg.test(value)){  
                 oSpanNode.innerHTML=okInfo.fontcolor("green");  
                 return true;  
             }else{  
                 oSpanNode.innerHTML=errInfo.fontcolor("red");  
                 return false;  
             }  
         }  
           
         function checkUserName(){  
             var reg =new RegExp("[a-z]{4}","i") ;//包含4个连续的字母,注意"i"中的双引号不能省略  
             return check("userName",reg,"userNameSpan","用户名格式正确","用户名格式错误");  
         }  
           
         function checkPwd(){  
             var reg = new RegExp("^[\\w\\d]{6,9}$");  
             return check("pwd",reg,"userPwdSpan","密码格式符合要求","密码长度必须是6-9位");  
         }  
           
         function checkPwd2(){//判断第2个密码和第1个是否相同  
             var flag;  
             var pwd = document.getElementsByName("pwd")[0].value;  
             var pwd2 = document.getElementsByName("pwd2")[0].value;  
             var oSpanNode = document.getElementById("userPwd2Span");  
             if(pwd==pwd2){  
                 oSpanNode.innerHTML="两次密码一致".fontcolor("green");  
                 flag = true;  
             }else{  
                 oSpanNode.innerHTML="两次密码不一致".fontcolor("red");  
                 flag = false;  
             }  
             return flag;  
         }  
           
         function checkMail(){  
             var reg = /^\w+@\w+(\.\w+)+$/i;  
             return check("mail",reg,"userMailSpan","","邮箱格式不正确");  
         }  
           
         function checkUser( ){//控制表单的提交  
             if(checkUserName() && checkPwd() && checkPwd2() && checkMail() ){  
                 return true;  
             }else{  
                 return false;  
             }  
         }  
           
      </script>  
   </head>  
     
   <body>  
     <form action="/dhtmlProj/servlet/RegServlet" οnsubmit="return checkUser();">  
         用户名:    <input type="text" name="userName" οnblur="checkUserName()"/>  
         <span id="userNameSpan"></span>  
         <br/>  
         输入密码:<input type="text" name="pwd" οnblur="checkPwd()"/>  
         <span id="userPwdSpan"></span>  
         <br/>  
         确认密码:<input type="text" name="pwd2" οnblur="checkPwd2()"/>  
         <span id="userPwd2Span"></span>  
         <br/>  
         邮件地址:<input type="text" name="mail" οnblur="checkMail()"/>  
         <span id="userMailSpan"></span>  
         <br/>  
         <input type="submit" value="注册">  
     </form>  
       
   </body>  
     
 </html>  

结果：

夏小弥

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Javascript-网页编程-DHTML-表单验证技术(正则表达式)

正则表达式的应用（用户注册）通过正则表达式实现用户注册页面1、正则表达式定义法1var reg = /^[0-9]{6}$/; //必须是6个数字，而且必须是6个。多了或少了都不行。2、正则表达式定义法2var reg = new RegExp("^[0-9]{6}$"); 3、细节var reg = new RegExp("[a
复制链接

扫一扫