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. python 字符串 操作

    去空格及特殊符号 s.strip().lstrip().rstrip(',') 复制字符串 #strcpy(sStr1,sStr2) sStr1 = 'strcpy' sStr2 = sStr1 sS ...

  2. Go语言构建json和解析json实例

    参考网址如下: https://www.cnblogs.com/fengbohello/p/4665883.html

  3. day 006 小数据池和再谈编码

    1.小数据池. 目的:缓存我们的字符串,整数,布尔值.在使用的时候不需要创建过多的对象 缓存: int str bool int 范围:-5~256 str: 1.长度小于等于1,直接缓存 2.长度大 ...

  4. 07-----nodejs 中 npm的使用

    npm是什么? 简单的说,npm就是JavaScript的包管理工具.类似Java语法中的maven,gradle,python中的pip. 安装 傻瓜式的安装. 第一步:打开https://node ...

  5. Nginx 为什么要延迟关闭

    防止 Nginx处理完后调用close关闭连接后  ,若缓冲区任然接收到客户端发来的内容 ,则服务器会向客户端发送RST包关闭连接,导致客户端由于收到了RST而忽略了  http  response  ...

  6. WSGI学习系列Pecan

    Pecan Introduce Pecan是一个轻量级的基于Python的Web框架, Pecan的目标并不是要成为一个“full stack”的框架, 因此Pecan本身不支持类似Session和D ...

  7. (转)ssh-keygen 中文手册

    ssh-keygen 中文手册 原文:http://www.jinbuguo.com/openssh/ssh-keygen.html 实例:http://blog.csdn.net/yl_1314/a ...

  8. 硬盘和显卡的访问与控制（二）——《x86汇编语言：从实模式到保护模式》读书笔记02

    上一篇博文我们讲了如何看到实验结果,这篇博文我们着重分析源代码. 书中作者为了说明原理,约定了一种比较简单地用户程序头部格式,示意图如下(我参考原书图8-15绘制的,左边的数字表示偏移地址): 所以, ...

  9. HDU 4365——Palindrome graph——————【规律+快速幂】

    Palindrome graph Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  10. HDU 5353—— Average——————【贪心+枚举】

    Average Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total S ...