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

时间：2022-09-09 15:57:38

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

注意：

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

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

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

　　      JavaScript 正则表单验证（用户名、密码、确认密码、手机号、座机号、身份证号）（错误提示图片）

 

<!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>

 

标签：

相关文章