首页
所有分类
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 相关文章推荐
EXTjs4.0的store的findRecord的BUG演示代码
Jun 08 Javascript
JS案例分享之金额小写转大写
May 15 Javascript
JavaScript声明变量名的语法规则
Jul 10 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
Feb 23 Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 Javascript
详解如何实现一个简单的 vuex
Feb 10 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
ES6入门教程之let、const的使用方法
Apr 13 Javascript
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
May 08 Javascript
浅谈vue中resetFields()使用注意事项
Aug 12 Javascript
前端JavaScript大管家 package.json
Nov 02 Javascript
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
鸿蒙(2) 声卡驱动(1) svg(1) 蓝屏(1) win7(2) 输入法(2) 鸿蒙3.0(1) Debian(1) Sunmao(1) 滚动条(1)
You might like
PHP 遍历XP文件夹下所有文件
2008/11/27 PHP
php操作SVN版本服务器类代码
2011/11/27 PHP
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
js 动态选中下拉框
2009/11/26 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
javascript 实现文本使用省略号替代（超出固定高度的情况）
2017/02/21 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
vue中v-model动态生成的实例详解
2017/10/27 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
2018/02/05 Javascript
JavaScript实现区块链
2018/03/14 Javascript
深入浅出理解JavaScript闭包的功能与用法
2018/08/01 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
[02:52]DOTA2新手基础教程 米波
2014/01/21 DOTA
python 截取 取出一部分的字符串方法
2017/03/01 Python
Python基于回溯法子集树模板解决数字组合问题实例
2017/09/02 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
Django在pycharm下修改默认启动端口的方法
2019/07/26 Python
python使用smtplib模块发送邮件
2020/12/17 Python
如何用Python徒手写线性回归
2021/01/25 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
Shein英国：女性时尚网上商店
2019/04/10 全球购物
大学生入党自我鉴定
2013/10/31 职场文书
大学生专科学习生活的自我评价
2013/12/07 职场文书
海洋科学专业求职信
2014/08/10 职场文书
党支部对照检查材料
2014/08/25 职场文书
详细的本科生职业生涯规划范文
2014/09/16 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
MATLAB 如何求取离散点的曲率最大值
2021/04/16 Python