超级强大的表单验证


Posted in Javascript onJune 26, 2006

 <title>表单验证类 Validator v1.01</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;overfmin:auto;}
 form{display:inline}
 </style>
 <table align="center">
  <form name="theForm" id="demo" action="" method="get" onSubmit="return Validator.Validate(this,2)">
    <tr>
   <td>真实姓名:</td><td><input name="Name" dataType="Chinese" msg="真实姓名只允许中文"></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 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 v1.01
 code by 我佛山人
 wfsr@cunite.com
 http://www.cunite.com
*************************************************/
 Validator = {
 Require : /.+/,
 Email : /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
 Phone : /^((\(\d{3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}$/,
 Mobile : /^((\(\d{3}\))|(\d{3}\-))?13\d{9}$/,
 Url : /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/,
 IdCard : /^\d{15}(\d{2}[A-Za-z0-9])?$/,
 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]+$/,
 UnSafe : /^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/,
 IsSafe : function(str){return !this.UnSafe.test(str);},
 SafeString : "this.IsSafe(value)",
 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 && value < 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 "Date" :
     case "Repeat" :
     case "Range" :
     case "Compare" :
     case "Custom" :
     case "Group" :
     case "Limit" :
     case "LimitB" :
     case "SafeString" :
      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){
   mode = 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){
  min = min || 0;
  max = 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;
  min = min || 1;
  max = max || groups.length;
  for(var i=groups.length-1;i>=0;i--)
   if(groups[i].checked) hasChecked++;
  return min <= hasChecked && hasChecked <= max;
 },
 IsDate : function(op, formatString){
  formatString = 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];
    month = m[5]--;
    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];
    month = m[3]--;
    year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10));
    break;
   default :
    break;
  }
  if(!parseInt(month)) return false;
  month = month==12 ?0:month;
  var date = new Date(year, month, day);
        return (typeof(date) == "object" && year == date.getFullYear() && month == date.getMonth() && day == date.getDate());
  function GetFullYear(y){return ((y<30 ? "20" : "19") + y)|0;}
 }
 }
</script>

Javascript 相关文章推荐
W3C Group的JavaScript1.8 新特性介绍
May 19 Javascript
jquery ajax提交表单数据的两种实现方法
Apr 29 Javascript
location.search在客户端获取Url参数的方法
Jun 08 Javascript
jquery实现图片灯箱明暗的遮罩效果
Nov 15 Javascript
js实现一个链接打开两个链接地址的方法
May 12 Javascript
详解Bootstrap插件
Apr 25 Javascript
基于JS实现textarea中获取动态剩余字数的方法
May 25 Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
Jul 27 Javascript
JS验证input输入框(字母,数字,符号,中文)
Mar 23 Javascript
Koa项目搭建过程详细记录
Apr 12 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 Javascript
Javascript调用XML制作连动下拉列表框
Jun 25 #Javascript
网页里控制图片大小的相关代码
Jun 25 #Javascript
如何取得中文输入的真实长度?
Jun 24 #Javascript
快速保存网页中所有图片的方法
Jun 23 #Javascript
网页常用特效代码整理
Jun 23 #Javascript
文本加密解密
Jun 23 #Javascript
解密效果
Jun 23 #Javascript
You might like
php Try Catch异常测试
2009/03/01 PHP
php 随机排序广告的实现代码
2011/05/09 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
php防止网站被攻击的应急代码
2015/10/21 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
js实现可拖动DIV的方法
2013/12/17 Javascript
javascript如何写热点图
2015/12/08 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
对javascript继承的理解
2016/10/11 Javascript
Django使用多数据库的方法
2017/09/06 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
微信小程序实现折叠面板
2018/01/31 Javascript
vue之debounce属性被移除及处理详解
2019/11/13 Javascript
vue v-model的用法解析
2020/10/19 Javascript
[01:52]深扒TI7聊天轮盘语音出处7
2017/05/11 DOTA
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中for循环和while循环的基本使用方法
2015/08/21 Python
python requests post多层字典的方法
2018/12/27 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
Python中turtle库的使用实例
2019/09/09 Python
python标准库OS模块详解
2020/03/10 Python
keras CNN卷积核可视化,热度图教程
2020/06/22 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
Windows环境下Python3.6.8 importError: DLLload failed:找不到指定的模块
2020/11/01 Python
详解用selenium来下载小姐姐图片并保存
2021/01/26 Python
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
法律专业自我鉴定
2013/10/03 职场文书
管理专员自荐信
2014/01/26 职场文书
《雨点》教学反思
2014/02/12 职场文书
授权委托书(完整版)
2014/09/10 职场文书
WebRTC记录音视频流(web技术分享)
2022/02/24 Javascript
海贼王十大逆天果实 魂魂果实上榜,岩浆果实攻击力最强
2022/03/18 日漫