码迷,mamicode.com
首页 > 移动开发 > 详细

JavaScript 正则表单验证(用户名、密码、确认密码、手机号、座机号、身份证号)

时间:2018-01-19 18:48:59      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:action   log   hone   文档   提示   座机   手机   重置   规则   

1、关于JavaScript表单验证,如果使用双向绑定的前端js框架,会更容易的多。但是博主还是建议大家不要脱离源生js本身。因为源生js才是王道。

注意:

  a、代码中的错误提示可能会没有,在代码中找到 “错误.jpg”  图片,自己制作一个

  b、验证的判断已经完成,只需要根据自己的验证规则进行表单验证,更换自己的正则表达式。

  c、博主将错误提示图片插入本文档中。需要更名为  “错误.jpg”,放到与html根目录下方可使用。

        技术分享图片(错误提示图片)

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
       <table border="1">
    <form action="正则验证手机号.html" name="form1" method="post" onsubmit="return test()">
        <tr>
            <td align="right">用户名:</td>
            <td><input type="text" name="username"></td>
            <td><span id="namemsg">*</span></td>
        </tr>
        <tr>
            <td align="right">密码:</td>
            <td><input type="password" name="pwd"></td>
            <td><span id="pwdmsg">*</span></td>
        </tr>
        <tr>
            <td align="right">确认密码:</td>
            <td><input type="password" name="pwd1"></td>
            <td><span id="pwd1msg">*</span></td>
        </tr>
        <tr>
            <td align="right">手机号:</td>
            <td><input type="text" name="phone"></td>
            <td><span id="iphone1">*</span></td>
        </tr>
        <tr>
            <td align="right">座机号:</td>
            <td><input type="text" name="phone1"></td>
            <td><span id="iphone2">*</span></td>
        </tr>
        <tr>
            <td align="right">身份证号:</td>
            <td><input type="text" name="sfzid"></td>
            <td><span id="sfzmsg">*</span></td>
        </tr>
        <tr>
            <td colspan="3">
            <input type="submit" name="sub" value="注册">
            <input type="reset" name="ret" value="重置" onclick="test1()">
            </td>
        </tr>
    </form>
   </table>

   <script type="text/javascript">
     //用户名验证
     document.form1.username.onkeyup=function(){
        var reg=/^[a-zA-Z]{1}[A-Z|a-z|0-9]{5,29}/;
         if(reg.test(this.value)&&this.value.length>=6&&this.value.length<=30){
             document.getElementById("namemsg").innerHTML="输入正确";
         }else{
            document.getElementById("namemsg").innerHTML="<img src=‘错误.jpg‘ width=‘15‘ height=‘15‘>";
         }
     }
     //密码验证
     document.form1.pwd.onkeyup=function(){
        var reg1=/[A-Za-z]+[0-9]+/;
         if(reg1.test(this.value)&&this.value.length>=6&&this.value.length<=8){
             document.getElementById("pwdmsg").innerHTML="输入正确";
         }else{
             document.getElementById("pwdmsg").innerHTML="<img src=‘错误.jpg‘ width=‘15‘ height=‘15‘>";
         }
     }
     //确认密码
     document.form1.pwd1.onkeyup=function(){
         if(this.value==document.form1.pwd.value&&this.value!=""){
             document.getElementById("pwd1msg").innerHTML="输入正确";
         }else{
             document.getElementById("pwd1msg").innerHTML="<img src=‘错误.jpg‘ width=‘15‘ height=‘15‘>";
         }
     }
     //手机号验证
     document.form1.phone.onkeyup=function(){
         var reg2=/^(13|14|15|17|18)[0-9]{9}/;
         if(reg2.test(this.value)&&this.value.length==11){
             document.getElementById("iphone1").innerHTML="输入正确";
         }else{
             document.getElementById("iphone1").innerHTML="<img src=‘错误.jpg‘ width=‘15‘ height=‘15‘>";
         }
       }
     //座机号验证
     document.form1.phone1.onkeyup=function(){
         var reg3=/^[0-9]{3,4}(\-{1})[0-9]{7,8}/;
         if(reg3.test(this.value)&&this.value.length==13||this.value.length==12){
             document.getElementById("iphone2").innerHTML="输入正确";
         }else{
             document.getElementById("iphone2").innerHTML="<img src=‘错误.jpg‘ width=‘15‘ height=‘15‘>";
         }
     }
     //身份证号验证
     document.form1.sfzid.onkeyup=function(){
         var reg4=/^\d{17}[(0-9)|X|x ]{1}/;
         if(reg4.test(this.value)&&this.value.length==18){
             document.getElementById("sfzmsg").innerHTML="输入正确";
         }else{
             document.getElementById("sfzmsg").innerHTML="<img src=‘错误.jpg‘ width=‘15‘ height=‘15‘>";
         }
     }

     //注册按钮方法
     function test(){
         var str="输入正确"
         if(document.getElementById("namemsg").innerHTML!==str){
            document.getElementById("namemsg").innerHTML="<img src=‘错误.jpg‘ width=‘15‘ height=‘15‘>";
            document.form1.username.focus();
            document.form1.username.value="";
            return false;
         }
         if(document.getElementById("pwdmsg").innerHTML!==str){
            document.getElementById("pwdmsg").innerHTML="<img src=‘错误.jpg‘ width=‘15‘ height=‘15‘>";
            document.form1.pwd.focus();
            document.form1.pwd.value="";
            return false;
         }
         if(document.getElementById("pwd1msg").innerHTML!==str){
            document.getElementById("pwd1msg").innerHTML="<img src=‘错误.jpg‘ width=‘15‘ height=‘15‘>";
            document.form1.pwd1.focus();
            document.form1.pwd1.value="";
            return false;
         }
         if(document.getElementById("iphone1").innerHTML!==str){
            document.getElementById("iphone1").innerHTML="<img src=‘错误.jpg‘ width=‘15‘ height=‘15‘>";
            document.form1.phone.focus();
            document.form1.phone.value="";
            return false;
         }
         if(document.getElementById("iphone2").innerHTML!==str){
            document.getElementById("iphone2").innerHTML="<img src=‘错误.jpg‘ width=‘15‘ height=‘15‘>";
            document.form1.phone1.focus();
            document.form1.phone.value="";
            return false;
         }
     }
   </script>
</body>
</html>

 

JavaScript 正则表单验证(用户名、密码、确认密码、手机号、座机号、身份证号)

标签:action   log   hone   文档   提示   座机   手机   重置   规则   

原文地址:https://www.cnblogs.com/wangweizhang/p/8318308.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!