`
kaishiba
  • 浏览: 59047 次
  • 性别: Icon_minigender_1
  • 来自: 西安
最近访客 更多访客>>
社区版块
存档分类
最新评论

Validator使用说明

阅读更多

Validator目前可实现的验证类型有:
1.是否为空;
2.中文字符;
3.双字节字符
4.英文;
5.数字;
6.整数;
7.实数;
8.Email地址;
9.使用HTTP协议的网址;
10.电话号码;
11.货币;
12.手机号码;
13.邮政编码;
14.身份证号码(1.05增强);
15.QQ号码;
16.日期;
17.符合安全规则的密码;
18.某项的重复值;
19.两数的关系比较;
20.判断输入值是否在(n, m)区间;
21.输入字符长度限制(可按字节比较);
22.对于具有相同名称的单选按钮的选中判断;
23.限制具有相同名称的多选按钮的选中数目;
24.自定义的正则表达式验证;
25.文件上传格式过滤(1.04新增)。

语法:accept="string"
类型:字符串。 可选。
说明:设定表单项输入过滤,多用于type="file" 的上传控件,以限制允许上传的文件类型。该属性仅当dataType属性值为Filter时起作用。

语 法:dataType="Require | Chinese | English | Number | Integer | Double | Email | Url | Phone | Mobile | Currency | Zip | IdCard | QQ | Date | SafeString | Repeat | Compare | Range | Limit | LimitB | Group | Custom | Filter "
 
类型:字符串。必选。
说明:用于设定表单项的输入数据验证类型。
选值说明:
可选值 验证功能
Require 必填项
Chinese 中文
English  英文

Number   数字
Integer   整数
Double   实数
Email   Email地址格式
Url    基于HTTP协议的网址格式
Phone    电话号码格式
Mobile   手机号码格式
Currency   货币格式
Zip   邮政编码
IdCard   身份证号码
QQ   Q号码
Date   日期
SafeString   安全密码
Repeat   重复输入
Compare  关系比较
Range   输入范围
Limit   限制输入长度
LimitB   限制输入的字节长度
Group    验证单/多选按钮组
Custom   自定义正则表达式验证 
Filter   设置过滤,用于限制文件上传


验证表单
在表单中加上onsubmit事件,触发调用Validaotor的Validate方法,代码示例:
<form onSubmit="return Validator.Validate(this,3)" action="your_application_page" method="post">
... ...
</form>
Validate 方法有两个可选参数,第一个为表单对象,如果是写在表单的onsubmit事件中,可以用this指代当前表单,默认值为事件源对象;第二个参数为错误提 示模式,可选值为1,2和3,默认值为1。省略第二个参数时相当于使用Validate(objForm,1),省略第一个参数时相当于Validate (this,1)。注意,不可以省略第一个参数而只写第二个参数,Validate(,2)是错误的用法。


验证输入是否Email地址
代码示例:
<input name="Email" dataType="Email" msg="信箱格式不正确">

<input name="Email" dataType="Custom" regexp="^\w+([-+.]\w+)*@\w+([-.]\\w+)*\.\w+([-.]\w+)*$" msg="信箱格式不正确">
 
Validator 的必要属性是dataType和msg(区分大小写),然后根据dataType值的不同,会引发出不同的属性。因为程序中已经集成Email地址格式的 正则,所以可以直接用dateType="Email"进行验证,如果对Email地址的格式有不同的限制,可以用自定义的正则来验证(参考第二段代 码)。

验证下拉菜单是否选中
代码示例:
<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>
注 意,对于IE,在option中没写value属性时IE的解释引擎将自动设置其值为空,而Firefox时将自动设置其值为text属性址。例如,在示 例代码中如果第一个option不写value属性,IE中将得到value为空,而Firefox为"选择您所用的操作系统"。


验证是否选中单选按钮组中的一个
代码示例:
广东<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="必须选定一个省份" >
对于单/多选按钮组的验证,dataType属性都为Group,然后只需在按钮组的最后一个写上dataType和msg属性。
注意,要成为单/多选按钮组,它们必须具有相同的name属性值。


限制多选按钮组的选中个数
代码示例:
运动<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种爱好">
要限制多选按钮组的选中个数,必须设置min和max属性。min属性用于设定选中个数的下限,max为上限,默认时min为1,max为多选按钮组的个数。

 <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 v1.05
 code by 我佛山人
 wfsr@msn.com
*************************************************/
 Validator = {
 Require : /.+/,
 Email : /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
 Phone : /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/,
 Mobile : /^((\(\d{2,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){
   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;
 },
 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){
  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]*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];
    month = m[3]*1;
    year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10));
    break;
   default :
    break;
  }
  if(!parseInt(month)) return false;
  month = 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>

分享到:
评论

相关推荐

    jquery_validator说明

    ### jQuery Validator 使用说明 #### 一、简介 jQuery Validator 是一款功能强大且易于使用的表单验证插件。它能够帮助开发者快速实现各种复杂的验证逻辑,提高用户体验并减少服务器端的压力。该插件由 Jörn ...

    [链接测试工具]HTML Link Validator

    ReadMe.html通常包含软件的使用说明、许可协议、版本信息、更新日志等重要内容。在使用HTML Link Validator之前,通过阅读此文件,用户可以了解软件的最新特性、操作指南以及可能遇到的问题解决方案。 四、优化网站...

    Validator V4.0 (表单验证,内含程序及详细的说明文档)

    在这里,你可以找到关于Validator V4.0的详细使用指南,包括安装步骤、配置方法、API参考以及示例代码。 2. `index.html`:这是框架的主入口文件,通常包含了示例代码和演示页面,开发者可以通过查看和运行这个文件...

    Async Validator 异步验证使用说明

    Async Validator 异步验证使用说明 Async Validator 是一个异步验证的库,需要传入要验证的数据和验证规则。下面是 Async Validator 异步验证使用说明的详细知识点: 一、Async Validator 的基本概念 Async ...

    bootStrapValidator

    6. **README.md** 文件:项目说明文件,通常会介绍项目的基本信息、安装步骤和使用方法。 要使用BootstrapValidator,首先需要在HTML中引入Bootstrap和BootstrapValidator的CSS及JS文件,然后在表单上添加相应的...

    验证控件使用说明,RequiredFieldValidator,CompareValidator ,RangeValidator ,RegularExpressionValidator,CustomValid

    ### 验证控件使用说明 #### 一、概述 在Web开发中,表单验证是非常重要的一个环节,它能够确保用户输入的数据符合预期的要求,从而避免后续处理中出现不必要的错误。ASP.NET提供了多种内置的验证控件,包括`...

    fluent-validator-1.0.6-API文档-中文版.zip

    赠送jar包:fluent-validator-1.0.6.jar; 赠送原API文档:fluent-validator-1.0.6-javadoc.jar; 赠送源代码:fluent-validator-1.0.6...人性化翻译,文档中的代码和结构保持不变,注释和说明精准翻译,请放心使用。

    bootstrapvalidator页面数据验证.zip

    6. readme.txt:通常包含关于如何安装和使用的说明。 使用BootstrapValidator的基本步骤如下: 1. 引入Bootstrap和BootstrapValidator的CSS及JS文件。 2. 在HTML表单中,为需要验证的字段添加相应的数据属性,比如...

    Flex from_validator_表单验证

    在Flex中,我们可以使用`from_validator`来实现这一功能。`from_validator`是一个内置的验证工具,它可以为表单字段定义验证规则,并在提交表单时执行这些规则。 二、基本流程 1. 创建表单:首先,我们需要创建一个...

    js验证框架validator(改良过)

    `说明.txt`可能包含详细的使用指南和API文档,帮助开发者理解和使用这个框架。 总的来说,这个改良版的Validator框架是为了解决实际开发中的痛点,提高了验证的效率和灵活性,同时也提升了用户体验。对于需要进行...

    fluent-validator-1.0.6-API文档-中英对照版.zip

    赠送jar包:fluent-validator-1.0.6.jar; 赠送原API文档:fluent-validator-1.0.6-javadoc.jar;...人性化翻译,文档中的代码和结构保持不变,注释和说明精准翻译,请放心使用。 双语对照,边学技术、边学英语。

    nice-validator前端校验js及demo

    此外,官方文档提供了详细的API说明和使用案例,是学习和查阅的重要参考。 总之,nice-validator凭借其易用性和灵活性,成为前端开发中值得信赖的数据校验工具。熟练掌握并应用nice-validator,能够提升项目开发...

    hibernate_validator_官方文档中文&英文版

    9. **校验API**:详述了校验API的使用,如ValidatorFactory、Validator、ConstraintValidator等核心接口。 10. **异常处理**:介绍了验证过程中可能出现的异常类型及其处理方式。 11. **性能优化**:提供了关于...

    common-validator

    `common-validator V1.0 API.rar`提供了详细的API文档,包括类结构、方法、属性和事件的说明,是开发者使用和扩展验证器的重要参考。 综上所述,`common-validator`是一款强大的JavaScript验证解决方案,它通过其...

    我佛山人validator4.0验证框架和使用文档

    4.0 功能特点 1.支持Ajax验证 2.实现密码安全度等级验证及显示 3.5种配置方式 4.6种消息提示模式 5.能避免网络原因未完全下载validator.js时提交未经验证表单的 6.避免变量名冲突 7.详细的帮助说明文档 8. ...

    一个validator的验证程序.rar_struts_validator

    www.pudn.com.txt可能是一个说明文档或者链接到更多资源的文本文件,它可能包含有关程序的详细说明、使用步骤或相关参考资料。而“一个validator的验证程序”这个文件可能是包含整个验证程序源代码的Java类或压缩...

    Struts Validator验证器使用指南.doc

    以下是对Struts Validator使用的一些关键知识点的详细说明: 1. **验证器的扩展性**:在开发过程中,开发人员可以选择扩展`ValidatorForm`或`ValidatorActionForm`来实现表单验证。扩展`ValidatorForm`时,需要确保...

    Hibernate_Validator_reference中文版@www.java1234.com.pdf

    该文档对如何使用 validation.xml 文件和如何映射约束做了说明。在启动框架时,需要配置和初始化 ValidatorFactory,该文档也对此有所涉及。 Hibernate Validator 的元数据API用于提供有关实体的元数据信息,包括...

    我佛山人Validator3.0

    "我佛山人Validator3.0"是一...在实际使用中,开发者通常需要将`Validator3.js`引入到HTML页面中,然后按照文档说明配置和调用验证方法,以实现所需的表单验证功能。通过阅读文档和示例,可以更好地理解和应用这个库。

Global site tag (gtag.js) - Google Analytics