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. Unity组件

    在学习C++的时候,对于面对对象有点了解.然后也使用过一段时间的Unity,用起来还是觉得,怎么这么好用.耦合性极低.当时不知道这是基于组件编程.所以现在来学习下基于组件的知识,并比较下基于组件和基于 ...

  2. 关于dubbo服务的xml配置文件报错的问题——The matching wildcard is strict, but no declaration can be found for element 'dubbo:application'

    在配置dubbo服务的过程中,经常会遇到虽然程序能够跑起来,但是配置文件一堆红叉,虽然不影响功能,但是确实很让人恶心. 报错信息如下: 解决方案: 下载一个dubbo.xsd文件(就在dubbo.ja ...

  3. MySQL安全优化

    一.数据库相关 1. MySQL版本的选择 在正式生产环境中,建议使用5.6或以上系列的版本(5.7不建议,曾经用过这个版本,问题有点多). 2. 运行用户与端口的配置 2.1.确保MySQL运行用户 ...

  4. sublime中正则替换

    匹配 <header></header>  ,  “.” 是匹配任意 非 换行 符号 而  \s\S 匹配任何符号 匹配div class为navbar 的 div <d ...

  5. C语言变参函数的实现原理

    1. 变参函数简单示例 #include <stdarg.h> #include <stdio.h> int Accumlate(int nr, ...) { ; ; va_l ...

  6. AsyncLocal 与 ThreadLocal ThreadStatic特性简介

    AsyncLocal 与 ThreadLocal [.NET深呼吸]基于异步上下文的本地变量(AsyncLocal) https://www.cnblogs.com/tcjiaan/p/5007737 ...

  7. 关于element-ui表格样式设置的方法cell-class-name

    关于element-ui表格使用的一些方法 最近在用Vue.js和elment-ui做一个后台管理项目,不得不说element功能非常强大,提供了许多组件,基本可以满足一些基础的开发了.因为我做的后台 ...

  8. 安装eclipse for ee

    去官网下载最新版本版本的linux版本的eclipse for ee,下载到Downloads文件夹. 解压文件夹 sudo tar -zxvf eclipse-jee-2018-09-linux-g ...

  9. RestTemplate中几种常见的请求方式

    GET请求 第一种:getForEntity getForEntity方法的返回值是一个ResponseEntity<T>,ResponseEntity<T>是Spring对H ...

  10. STM32中管脚利用

    如果利用4线SWD则剩余的调试引脚可以作为IO使用: void JTAG_Set(unsigned char Mode){ u32 temp; temp=Mode; temp<<=25; ...