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 正则表单验证（用户名、密码、确认密码、手机号、座机号、身份证号）的更多相关文章

  1. 第一百五十一节，封装库--JavaScript，表单验证--密码确认验证--回答验证--电子邮件验证加自动补全

    封装库--JavaScript,表单验证--密码确认验证--回答验证--电子邮件验证加自动补全 效果图 html <div id="reg"> <h2 class ...

  2. 第一百五十节，封装库--JavaScript，表单验证--密码验证

    封装库--JavaScript,表单验证--密码验证 效果图 html <div id="reg"> <h2 class="tuo">& ...

  3. 第一百四十九节，封装库--JavaScript，表单验证--验证用户名

    封装库--JavaScript,表单验证--验证用户名 注册验证功能,顾名思义就是验证表单中每个字段的合法性,如果全部合法才可以提交表单. 效果图 聚集光标时 信息不合法是 信息合法时 html &l ...

  4. 第一百五十四节，封装库--JavaScript，表单验证--提交验证

    封装库--JavaScript,表单验证--提交验证 将表单的所有必填项,做一个判断函数,填写正确时返回布尔值 最后在提交时,判断每一项是否正确,全部正确才可以 提交 html <div id= ...

  5. 第一百五十三节，封装库--JavaScript，表单验证--备注字数验证

    封装库--JavaScript,表单验证--备注字数验证 效果图 html <div id="reg"> <h2 class="tuo"> ...

  6. 第一百五十二节，封装库--JavaScript，表单验证--年月日注入

    封装库--JavaScript,表单验证--年月日注入 效果图 html <div id="reg"> <h2 class="tuo"> ...

  7. JavaScript：表单验证模型

    之前做的验证提示以弹框的形式出现太丑陋了,不符合标准的验证提示.如果要想进行更好的数据验证操作,那么必须进行一些模块化设计,通过表单样式的改变来提示.其实,一般的数据验证无非就是那么几种,例如: 大多 ...

  8. JavaScript常用表单验证正则表达式（身份证、电话号码、邮编、日期、IP等）

    身份证正则表达式 //身份证正则表达式(15位)isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;//身份证正则表达式 ...

  9. JavaScript实现表单验证_02

    注册3次错误,最终的结果: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

随机推荐

  1. POJ1060 Modular multiplication of polynomials

    题目来源:http://poj.org/problem?id=1060 题目大意: 考虑系数为0和1的多项式.两个多项式的加法可以通过把相应次数项的系数相加而实现.但此处我们用模2加法来计算系数之和. ...

  2. Ubuntu 16.04设置root用户登录图形界面

    ubuntu桌面版默认不开启root登录,所以需要进行设置, 可以参考博客 https://www.linuxidc.com/Linux/2017-01/139094.htm

  3. hdu1028 Ignatius and the Princess III(递归、DP)

    Ignatius and the Princess III Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K ...

  4. saltstack一键部署高可用

    一健推送apache [root@server1 minions]# cd /etc/salt/ [root@server1 salt]# vim master [root@server1 salt] ...

  5. Quartz中Cron详解

    Quartz中的cron跟Linux系统的cron定义不太一样(Linux从分开始) 特殊字符: * 用来表示包含一个范围内的任意值. 例如, 分钟位置的“*” 表示 “每分钟”. ?  当不特定指代 ...

  6. js 获取非行间样式

    1.getComputedStyle(nodeObj,false):该方法是BOM对象,第一个是要获取样式的节点对象:第二个可以写成任何的字符一般写成false或者null,这里最好是用false因为 ...

  7. 解决Yii2 添加css后页面刷新也无反应的情况

    'assetManager' => [ // uncomment the following line if you want to auto update your assets (unix ...

  8. java——java只有值传递

    真的只有值传递! java中对象作为参数传递给一个方法,到底是值传递,还是引用传递? 答:值传递 这里说的很清楚了:https://www.cnblogs.com/zhouxiansheng/p/39 ...

  9. pdf.js使用爬过的坑

    最近项目里需要做一个在浏览器直接预览pdf的功能,有些浏览器可以直接预览pdf文件,但是有些不能(不要躲,说的就是你IE)查资料普遍推荐pdf.js,兼容能到ie9,很不错了. 1． 从pdf.js官 ...

  10. 转 sql profile 绑定 litera and move profile to another db l for spa

    SQL TYPE 1:for bind value sql , first create a good plan with literal and with good  profile. then u ...