超级强大的表单验证

zhangjinglwt

zhangjinglwt

2016-02-19 12:53

下面图老师小编要向大家介绍下超级强大的表单验证,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!
 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真实姓名:/tdtdinput name="Name" dataType="Chinese" msg="真实姓名只允许中文"/td
  /tr
  tr
   td英文名:/tdtdinput name="Nick" dataType="English" require="false" msg="英文名只允许英文字母"/td
  /tr
    tr
   td主页:/tdtdinput name="Homepage" require="false" dataType="Url"   msg="非法的Url"/td
  /tr
  tr
   td密码:/tdtdinput name="Password" dataType="SafeString"   msg="密码不符合安全规则" type="password"/td
  /tr
  tr
   td重复:/tdtdinput name="Repeat" dataType="Repeat" to="Password" msg="两次输入的密码不一致" type="password"/td
  /tr
  tr
   td信箱:/tdtdinput name="Email" dataType="Email" msg="信箱格式不正确"/td
  /tr
    tr
   td信箱:/tdtdinput name="Email" dataType="Repeat" to="Email" msg="两次输入的信箱不一致"/td
  /tr
  tr
   tdQQ:/tdtdinput name="QQ" require="false" dataType="QQ" msg="QQ号码不存在"/td
  /tr
    tr
   td身份证:/tdtdinput name="Card" dataType="IdCard" msg="身份证号码不正确"/td
  /tr
  tr
   td年龄:/tdtdinput name="Year" dataType="Range" msg="年龄必须在18~28之间" min="18" max="28"/td
  /tr
   tr
   td年龄1:/tdtdinput name="Year1" require="false" dataType="Compare" msg="年龄必须在18以上" to="18" operator="GreaterThanEqual"/td
  /tr
   tr
   td电话:/tdtdinput name="Phone" require="false" dataType="Phone" msg="电话号码不正确"/td
  /tr
   tr
   td手机:/tdtdinput name="Mobile" require="false" dataType="Mobile" msg="手机号码不正确"/td
  /tr
     tr
   td生日:/tdtdinput name="Birthday" dataType="Date" format="ymd" msg="生日日期不存在"/td
  /tr
   tr
   td邮政编码:/tdtdinput name="Zip" dataType="Custom" regexp="^[1-9]d{5}$" msg="邮政编码不存在"/td
  /tr
  tr
   td邮政编码:/tdtdinput name="Zip1" dataType="Zip" msg="邮政编码不存在"/td
  /tr
  tr
   td操作系统:/tdtdselect name="Operation" dataType="Require"  msg="未选择所用操作系统" option value=""选择您所用的操作系统/optionoption value="Win98"Win98/optionoption value="Win2k"Win2k/optionoption value="WinXP"WinXP/option/select/td
  /tr
  tr
   td所在省份:/tdtd广东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爱好:/tdtd运动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自我介绍:/tdtdtextarea name="Description" dataType="Limit" max="10"  msg="自我介绍内容必须在10个字之内"中文是一个字/textarea/td
  /tr
     td自传:/tdtdtextarea 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}-))?((0d{2,3})|0d{2,3}-)?[1-9]d{6,7}$/,
 Mobile : /^(((d{3}))|(d{3}-))?13d{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 : ["以下原因导致提交失败:tttt"],
 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;icount;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;ierrCount;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;ierrCount;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 ((y30 ? "20" : "19") + y)|0;}
 }
 }
/script
展开更多 50%)
分享

猜你喜欢

超级强大的表单验证

Web开发
超级强大的表单验证

一个非常强大完整的web表单验证程序(1)

电脑网络
一个非常强大完整的web表单验证程序(1)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

一个非常强大完整的web表单验证程序(2)

电脑网络
一个非常强大完整的web表单验证程序(2)

Javascript 验证表单插件

Web开发
Javascript 验证表单插件

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

通用表单验证函数

电脑网络
通用表单验证函数

JavaScript表单验证年龄

Web开发
JavaScript表单验证年龄

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

用Delphi实现整个网站图片的极速下载

用Delphi实现整个网站图片的极速下载

图片按比例缩放函数

图片按比例缩放函数
下拉加载更多内容 ↓