首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js正则表达式注册页面表单验证

Posted in Javascript onOctober 11, 2016

正则表达式方式的验证方式，这个验证比较标准而且比较全面，不过也是通过点击提交按钮才进行验证，本实例可以这样验证，具体内容如下

js正则表达式注册页面表单验证

 也可以这样验证

js正则表达式注册页面表单验证

具体代码

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>表单验证类Validator v1</title> 
<style> 
 body,td{font:normal 12px Verdana;color:#333333} 
 input,textarea,select,td{font:normal 12px Verdana;color:#333333;border:1px solid #999999;background:#ffffff} 
 table{border-collapse:collapse;} 
 td{padding:3px} 
 input{height:20;} 
 textarea{width:80%;height:50px;overflow:auto;} 
 form{display:inline} 
 </style> 
</head> 
<body> 
<table align="center"> 
    <form name="theForm" id="demo" method="get" onSubmit="return Validator.Validate(this,2)"> 
        <tr> 
            <td>身份证号：</td> 
            <td><input name="Card" dataType="IdCard" msg="身份证号错误"></td> 
        </tr> 
        <tr> 
            <td>真实姓名：</td> 
            <td><input name="Name" dataType="Chinese" msg="真实姓名只允许中文"></td> 
        </tr> 
        <tr> 
            <td>ID：</td> 
            <td><input name="username" dataType="Username" msg="ID名不符合规定"></td> 
        </tr> 
        <tr> 
            <td>英文名：</td> 
            <td><input name="Nick" dataType="English" require="false" msg="英文名只允许英文字母"></td> 
        </tr> 
        <tr> 
            <td>主页：</td> 
            <td><input name="Homepage" require="false" dataType="Url"  msg="非法的Url"></td> 
        </tr> 
        <tr> 
            <td>密码：</td> 
            <td><input name="Password" dataType="SafeString"  msg="密码不符合安全规则" type="password"></td> 
        </tr> 
        <tr> 
            <td>重复：</td> 
            <td><input name="Repeat" dataType="Repeat" to="Password" msg="两次输入的密码不一致" type="password"></td> 
        </tr> 
        <tr> 
            <td>信箱：</td> 
            <td><input name="Email" dataType="Email" msg="信箱格式不正确"></td> 
        </tr> 
        <tr> 
            <td>信箱：</td> 
            <td><input name="Email" dataType="Repeat" to="Email" msg="两次输入的信箱不一致"></td> 
        </tr> 
        <tr> 
            <td>QQ：</td> 
            <td><input name="QQ" require="false" dataType="QQ" msg="QQ号码不存在"></td> 
        </tr> 
        <tr> 
            <td>身份证：</td> 
            <td><input name="Card" dataType="IdCard" msg="身份证号码不正确"></td> 
        </tr> 
        <tr> 
            <td>年龄：</td> 
            <td><input name="Year" dataType="Range" msg="年龄必须在18~28之间" min="18" max="28"></td> 
        </tr> 
        <tr> 
            <td>年龄1：</td> 
            <td><input name="Year1" require="false" dataType="Compare" msg="年龄必须在18以上" to="18" operator="GreaterThanEqual"></td> 
        </tr> 
        <tr> 
            <td>电话：</td> 
            <td><input name="Phone" require="false" dataType="Phone" msg="电话号码不正确"></td> 
        </tr> 
        <tr> 
            <td>手机：</td> 
            <td><input name="Mobile" require="false" dataType="Mobile" msg="手机号码不正确"></td> 
        </tr> 
        <tr> 
            <td>生日：</td> 
            <td><input name="Birthday" dataType="Date" format="ymd" msg="生日日期不存在"></td> 
        </tr> 
        <tr> 
            <td>邮政编码：</td> 
            <td><input name="Zip" dataType="Custom" regexp="^[1-9]\d{5}$" msg="邮政编码不存在"></td> 
        </tr> 
        <tr> 
            <td>邮政编码：</td> 
            <td><input name="Zip1" dataType="Zip" msg="邮政编码不存在"></td> 
        </tr> 
        <tr> 
            <td>操作系统：</td> 
            <td><select name="Operation" dataType="Require" msg="未选择所用操作系统" > 
                    <option value="">选择您所用的操作系统</option> 
                    <option value="Win98">Win98</option> 
                    <option value="Win2k">Win2k</option> 
                    <option value="WinXP">WinXP</option> 
                </select></td> 
        </tr> 
        <tr> 
            <td>所在省份：</td> 
            <td>广东 
                <input name="Province" value="1" type="radio"> 
                陕西 
                <input name="Province" value="2" type="radio"> 
                浙江 
                <input name="Province" value="3" type="radio"> 
                江西 
                <input name="Province" value="4" type="radio" dataType="Group" msg="必须选定一个省份" ></td> 
        </tr> 
        <tr> 
            <td>爱好：</td> 
            <td>运动 
                <input name="Favorite" value="1" type="checkbox"> 
                上网 
                <input name="Favorite" value="2" type="checkbox"> 
                听音乐 
                <input name="Favorite" value="3" type="checkbox"> 
                看书 
                <input name="Favorite" value="4" type="checkbox"" dataType="Group" min="2" max="3" msg="必须选择2~3种爱好"></td> 
        </tr> 
        <td>自我介绍：</td> 
        <td><textarea name="Description" dataType="Limit" max="10" msg="自我介绍内容必须在10个字之内">中文是一个字</textarea></td> 
        </tr> 
         
        <td>自传：</td> 
        <td><textarea name="History" dataType="LimitB" min="3" max="10" msg="自传内容必须在[3,10]个字节之内">中文是两个字节t</textarea></td> 
        </tr> 
         
        <tr> 
            <td>相片上传：</td> 
            <td><input name="up" dataType="Filter" msg="非法的文件格式" type="file" accept="jpg, gif, png"></td> 
        </tr> 
        <tr> 
            <td colspan="2"><input name="Submit" type="submit" value="确定提交"> 
                <input onClick="Validator.Validate(document.getElementById('demo'))" value="检验模式1" type="button"> 
                <input onClick="Validator.Validate(document.getElementById('demo'),2)" value="检验模式2" type="button"> 
                <input onClick="Validator.Validate(document.getElementById('demo'),3)" value="检验模式3" type="button"></td> 
        </tr> 
    </form> 
</table> 
<script> 
 Validator = { 
  Require : /.+/, 
  Email : /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, 
  Phone : /^((\d2,3)|(\d{3}\-))?(0\d2,3|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/, 
  Mobile : /^((\d2,3)|(\d{3}\-))?13\d{9}$/, 
  Url : /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/, 
  IdCard : "this.IsIdCard(value)", 
  Currency : /^\d+(\.\d+)?$/, 
  Number : /^\d+$/, 
  Zip : /^[1-9]\d{5}$/, 
  QQ : /^[1-9]\d{4,8}$/, 
  Integer : /^[-\+]?\d+$/, 
  Double : /^[-\+]?\d+(\.\d+)?$/, 
  English : /^[A-Za-z]+$/, 
  Chinese : /^[\u0391-\uFFE5]+$/, 
  Username : /^[a-z]\w{3,}$/i, 
  UnSafe : /^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.
\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/, 
  IsSafe : function(str){return !this.UnSafe.test(str);}, 
  SafeString : "this.IsSafe(value)", 
  Filter : "this.DoFilter(value, getAttribute('accept'))", 
  Limit : "this.limit(value.length,getAttribute('min'), getAttribute('max'))", 
  LimitB : "this.limit(this.LenB(value), getAttribute('min'), getAttribute('max'))", 
  Date : "this.IsDate(value, getAttribute('min'), getAttribute('format'))", 
  Repeat : "value == document.getElementsByName(getAttribute('to'))[0].value", 
  Range : "getAttribute('min') < (value|0) && (value|0) < getAttribute('max')", 
  Compare : "this.compare(value,getAttribute('operator'),getAttribute('to'))", 
  Custom : "this.Exec(value, getAttribute('regexp'))", 
  Group : "this.MustChecked(getAttribute('name'), getAttribute('min'), getAttribute('max'))", 
  ErrorItem : [document.forms[0]], 
  ErrorMessage : ["以下原因导致提交失败：\t\t\t\t"], 
  Validate : function(theForm, mode){ 
    var obj = theForm || event.srcElement; 
    var count = obj.elements.length; 
    this.ErrorMessage.length = 1; 
    this.ErrorItem.length = 1; 
    this.ErrorItem[0] = obj; 
    for(var i=0;i<count;i++){ 
      with(obj.elements[i]){ 
        var _dataType = getAttribute("dataType"); 
        if(typeof(_dataType) == "object" || typeof(this[_dataType]) == "undefined") continue; 
        this.ClearState(obj.elements[i]); 
        if(getAttribute("require") == "false" && value == "") continue; 
        switch(_dataType){ 
          case "IdCard" : 
          case "Date" : 
          case "Repeat" : 
          case "Range" : 
          case "Compare" : 
          case "Custom" : 
          case "Group" :  
          case "Limit" : 
          case "LimitB" : 
          case "SafeString" : 
          case "Filter" : 
            if(!eval(this[_dataType])) { 
              this.AddError(i, getAttribute("msg")); 
            } 
            break; 
          default : 
            if(!this[_dataType].test(value)){ 
              this.AddError(i, getAttribute("msg")); 
            } 
            break; 
        } 
      } 
    } 
    if(this.ErrorMessage.length > 1){ 
      modemode = mode || 1; 
      var errCount = this.ErrorItem.length; 
      switch(mode){ 
      case 2 : 
        for(var i=1;i<errCount;i++) 
          this.ErrorItem[i].style.color = "red"; 
      case 1 : 
        alert(this.ErrorMessage.join("\n")); 
        this.ErrorItem[1].focus(); 
        break; 
      case 3 : 
        for(var i=1;i<errCount;i++){ 
        try{ 
          var span = document.createElement("SPAN"); 
          span.id = "__ErrorMessagePanel"; 
          span.style.color = "red"; 
          this.ErrorItem[i].parentNode.appendChild(span); 
          span.innerHTML = this.ErrorMessage[i].replace(/\d+:/,"*"); 
          } 
          catch(e){alert(e.description);} 
        } 
        this.ErrorItem[1].focus(); 
        break; 
      default : 
        alert(this.ErrorMessage.join("\n")); 
        break; 
      } 
      return false; 
    } 
    return true; 
  }, 
  limit : function(len,min, max){ 
    minmin = min || 0; 
    maxmax = max || Number.MAX_VALUE; 
    return min <= len && len <= max; 
  }, 
  LenB : function(str){ 
    return str.replace(/[^\x00-\xff]/g,"**").length; 
  }, 
  ClearState : function(elem){ 
    with(elem){ 
      if(style.color == "red") 
        style.color = ""; 
      var lastNode = parentNode.childNodes[parentNode.childNodes.length-1]; 
      if(lastNode.id == "__ErrorMessagePanel") 
        parentNode.removeChild(lastNode); 
    } 
  }, 
  AddError : function(index, str){ 
    this.ErrorItem[this.ErrorItem.length] = this.ErrorItem[0].elements[index]; 
    this.ErrorMessage[this.ErrorMessage.length] = this.ErrorMessage.length + ":" + str; 
  }, 
  Exec : function(op, reg){ 
    return new RegExp(reg,"g").test(op); 
  }, 
  compare : function(op1,operator,op2){ 
    switch (operator) { 
      case "NotEqual": 
        return (op1 != op2); 
      case "GreaterThan": 
        return (op1 > op2); 
      case "GreaterThanEqual": 
        return (op1 >= op2); 
      case "LessThan": 
        return (op1 < op2); 
      case "LessThanEqual": 
        return (op1 <= op2); 
      default: 
        return (op1 == op2);       
    } 
  }, 
  MustChecked : function(name, min, max){ 
    var groups = document.getElementsByName(name); 
    var hasChecked = 0; 
    minmin = min || 1; 
    maxmax = max || groups.length; 
    for(var i=groups.length-1;i>=0;i--) 
      if(groups[i].checked) hasChecked++; 
    return min <= hasChecked && hasChecked <= max; 
  }, 
  DoFilter : function(input, filter){ 
return new RegExp("^.+\.(?=EXT)(EXT)$".replace(/EXT/g, filter.split(/\s*,\s*/).join("|")), "gi").test(input); 
  }, 
  IsIdCard : function(number){ 
    var date, Ai; 
    var verify = "10x98765432"; 
    var Wi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]; 
    var area = ['','','','','','','','','','','','北京','天津','河北','山西','内蒙古','','','','','','辽宁','吉林','黑龙江','','','','','','','','上海','江苏','浙江','安微','福建','江西','山东','','','','河南','湖北','湖南','广东','广西','海南','','','','重庆','四川','贵州','云南','西藏','','','','','','','陕西','甘肃','青海','宁夏','新疆','','','','','','台湾','','','','','','','','','','香港','澳门','','','','','','','','','国外']; 
    var re = number.match(/^(\d{2})\d{4}(((\d{2})(\d{2})(\d{2})(\d{3}))|((\d{4})(\d{2})(\d{2})(\d{3}[x\d])))$/i); 
    if(re == null) return false; 
    if(re[1] >= area.length || area[re[1]] == "") return false; 
    if(re[2].length == 12){ 
      Ai = number.substr(0, 17); 
      date = [re[9], re[10], re[11]].join("-"); 
    } 
    else{ 
      Ai = number.substr(0, 6) + "19" + number.substr(6); 
      date = ["19" + re[4], re[5], re[6]].join("-"); 
    } 
    if(!this.IsDate(date, "ymd")) return false; 
    var sum = 0; 
    for(var i = 0;i<=16;i++){ 
      sum += Ai.charAt(i) * Wi[i]; 
    } 
    Ai += verify.charAt(sum%11); 
    return (number.length ==15 || number.length == 18 && number == Ai); 
  }, 
  IsDate : function(op, formatString){ 
    formatStringformatString = formatString || "ymd"; 
    var m, year, month, day; 
    switch(formatString){ 
      case "ymd" : 
        m = op.match(new RegExp("^((\\d{4})|(\\d{2}))([-./])(\\d{1,2})\\4(\\d{1,2})$")); 
        if(m == null ) return false; 
        day = m[6]; 
        mmonth = m[5]*1; 
        year = (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3], 10)); 
        break; 
      case "dmy" : 
        m = op.match(new RegExp("^(\\d{1,2})([-./])(\\d{1,2})\\2((\\d{4})|(\\d{2}))$")); 
        if(m == null ) return false; 
        day = m[1]; 
        mmonth = m[3]*1; 
        year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10)); 
        break; 
      default : 
        break; 
    } 
    if(!parseInt(month)) return false; 
    monthmonth = month==0 ?12:month; 
    var date = new Date(year, month-1, day); 
    return (typeof(date) == "object" && year == date.getFullYear() && month == (date.getMonth()+1) && day == date.getDate()); 
    function GetFullYear(y){return ((y<30 ? "20" : "19") + y)|0;} 
  } 
 } 
</script> 
</body> 
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

js正则表达式注册页面表单验证

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
巧用局部变量提升javascript性能
Feb 24 Javascript
js函数模拟显示桌面.scf程序示例
Apr 20 Javascript
JavaScript数据推送Comet技术详解
Apr 07 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
JS获取复选框的值,并传递到后台的实现方法
May 30 Javascript
JavaScript数组去重的多种方法(四种)
Sep 19 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 Javascript
详解ES7 Decorator 入门解析
Feb 18 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
layer实现弹出层自动调节位置
Sep 05 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 #Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
Oct 11 #Javascript
浅谈在js传递参数中含加号(+)的处理方式
Oct 11 #Javascript
JS验证图片格式和大小并预览的简单实例
Oct 11 #Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 #Javascript
js 判断附件后缀的简单实现方法
Oct 11 #Javascript
判断数组的最佳方法(推荐)
Oct 11 #Javascript
GWEN(1) 调频(4) 立体声(1) Harman Kardon(1) ad hoc(1) KDKA(1) FM(4) 中波(3) SWL(1) 电台频率(32)
You might like
我的php学习笔记(毕业设计)
2012/02/21 PHP
解析php中heredoc的使用方法
2013/06/17 PHP
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
javascript中的delete使用详解
2013/04/11 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
bootstrap导航条实现代码
2016/12/28 Javascript
jquery实现自定义图片裁剪功能【推荐】
2017/03/08 Javascript
微信小程序之蓝牙的链接
2017/09/26 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
JavaScript实现美化滑块效果
2019/05/17 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
vue使用openlayers实现移动点动画
2020/09/24 Javascript
[51:32]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
写了个监控nginx进程的Python脚本
2012/05/10 Python
自己使用总结Python程序代码片段
2015/06/02 Python
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
Priority Pass机场贵宾室会籍计划：全球超过1200间机场贵宾室
2018/08/26 全球购物
zooplus意大利：在线宠物商店
2019/08/07 全球购物
市场营销专业求职信
2014/06/17 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
聘任协议书（挂靠）
2015/09/21 职场文书
导游词之镇江焦山
2019/11/21 职场文书
改造DE1103三步曲
2022/04/07 无线电