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. 记录下自己安装cuda以及cudnn

    之前已经装过一次了,不过没有做记录,现在又要翻一堆博客安装,长点记性,自己记录下. 环境 ubuntu16.04 python2.7 商家送过来时候已经装好了显卡驱动,所以省去了一大麻烦. 剩下的就是 ...

  2. 邮件服务器启动postfix时的问题：master 已死，但 pid 文件仍存

    [root@linux115 ~]# service postfix restart  // 重启postfix关闭 postfix:[失败]  启动 postfix: [确定][root@linux ...

  3. 江西财经大学第一届程序设计竞赛 C

    链接:https://www.nowcoder.com/acm/contest/115/C来源:牛客网 题目描述 决赛圈还剩下两个人,“伏地魔”XDD和跑毒进圈的FZL,XDD拿着狙击枪AWM瞄准并准 ...

  4. jq ajax超时设置

    var ajaxTimeoutTest = $.ajax({ url:'', //请求的URL timeout : 1000, //超时时间设置,单位毫秒 type : 'get', //请求方式,g ...

  5. testlink数据库访问密码修改

    testlink重启后数据库连接不上将会报错 错误:1045 - Access denied for user 'my_db '@'localhost' (using password: YES) 怎 ...

  6. d题

    #include<iostream>#include<algorithm>using namespace std;int a[200005];int b[200005];int ...

  7. protobuf在c++的使用方法以及在linux安装

      https://blog.csdn.net/wangyin668/article/details/80046798 https://www.cnblogs.com/zhouyang209117/p ...

  8. VIM操作手札

    查看帮助手册 [Vim 中文帮助文档] 常用命令及说明 在命令模式下编辑 命令 说明 Ctrl+u 向文件首翻半屏 Ctrl+d 向文件尾翻半屏 Ctrl+f 向文件尾翻一屏 Ctrl+b 向文件首翻 ...

  9. virtualenv（for python）

    完整: http://docs.jinkan.org/docs/flask/installation.html#installation   virtualenv 你很可能想在开发中用上 virtua ...

  10. 使用summernote编辑器上传图片，重写onImageUpload

    JS部分:$('.summernote').summernote({ height: 200,//高度 tabsize: 2,//页面上的summernote编辑框的个数 lang: 'zh-CN', ...