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. php版 日文半角转全角

    工作需要,写的这个 /* *转载请注明 http://www.cnblogs.com/kclteam/p/5278923.html$str //参数可以是字符串或数组*/ function HkToF ...

  2. html td 限制 高度 和 宽度

    td 要设置成 display : block td 里面的span 自动换行.. <td style="max-width: 150px;overflow-y:scroll;disp ...

  3. C语言中typedef的解释_1

    typedef是在计算机编程语言中用来为复杂的声明定义简单的别名,它与宏定义有些差异. 它本身是一种存储类的关键字,与auto.extern.mutable.static.register等关键字不能 ...

  4. 利用Shell脚本实现远程MySQL自动查询

    下面这个脚本是一个简单用来执行远程数据库查询的命令,相信大家都能看得懂,这对于有些需要每天自动检查数据库或是执行某些语句的兄弟,是很有帮助的,只要稍加修改就可以 #!/bin/shHOST=192.1 ...

  5. Photoshop入门教程（二）：暂存盘设置与标尺设置

    新建文档之后大家就可以对图像进行编辑.在对图像进行编辑之前,先来了解一下如何查看图像的一些基本信息.在软件左下角,会有这样的信息显示窗口. 1窗口表示当前图像显示比例,200%代表当前为放大两倍显示. ...

  6. spring test: 配置文件优先级

    application.properties 默认 application-xxx.properties 高 systemEnvironment 高 test/main/resources/ 同名文件 ...

  7. python模块之numpy

    Numpy是一个第三方库,是数组相关的运算 通过pip安装:pip install numpy Anaconda python的一个科学计算发行版本,安装后将不必单独安装numpy,下面的库模块也将不 ...

  8. python : No such file or directory

    windows上写的python脚本,在linux上执行时报: No such file or directory 解决方法一# sed -i 's#\r##' mysqlchk.py 解决方法二脚本 ...

  9. indexOf 可用于字符串和数组

    indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置. indexOf 与String类似,Array也可以通过indexOf()来搜索一个指定的元素的位置: var arr = ...

  10. css3 移动端页面全屏旋转，横屏显示。

    css3旋转模拟手机横屏. 当手机不能自动旋转时,或有特殊需求.用css3 transform,实现横屏展示. 注意: 相关样式注意横屏的显示. touch的手势方向没有变,依旧是原来方向,若有相关插 ...