陈乔恩和古天乐生日:关于《?jQuery?formValidator表单验证插件》之二

2011/4/30 jQuery formValidator 4.0ver
这次升级要感谢很多在博客里不断留言的网友，特别感谢网友“mark35”在博客上替我回答网友的提问，再次感谢。

1、这次升级精简了代码。

2、提高校验的速度。
如果控件的name相同，则只校验一次，加快校验速度

3、修复4个状态为空时，没有隐藏提示的问题。

4、修改initConfig配置里的onerror函数，增加一个“错误列表”参数。你可以把所有的错误信息集中显示在某处
$.formValidator.initConfig({formid:"form1", 
onerror:function(msg,obj,errorlist){ 
    //遍历所有的错误消息
   $.map(errorlist,function(msg1){alert(msg1)}); 
}, 
onsuccess:function(){alert('ddd');return false;}
});

5、针对问题比较多的ajaxValidator函数，进行如下修改
a、支持同组的所有表单值都传递给服务器端
必须为每个控件增加name属性，否则是不会传递过去的。
b、去掉addidvalue参数。在服务器端，你可以通过name为clientid获取触发验证的控件ID名
c、为formvalidator增加ajax参数(值为true,false，默认true)，表示ajaxValidator是否把该表单提交给服务器

6、修正automodify参数（如果输入的值非法，则恢复原来的值）不起作用的问题

6、regexValidator支持多个正则表达式与和或的校验，详见用户手册和demo1
a、增加属性：compareType，比较类型，默认值"||"，"||"表示或的关系，"&&"表示并列关系
b、原regexp属性支持接收数组
范例如下：
$("#sjdh").formValidator({empty:true,onshow:"请输入你的手机或者电话号码，可以为空哦",onfocus:"格式例如：0577-88888888或11位手机号码",oncorrect:"谢谢你的合作",onempty:"你真的不想留手机或电话了吗？"}).regexValidator({regexp:["tel","mobile"],datatype:"enum",onerror:"你输入的手机或电话格式不正确"});

7、增加函数$.formvalidator.reloadAutoTip()，来重新定位自动构建的提示层
自动构建提示层所在的网页如果在iframe里，如果刚开始是隐藏的，显示的时候，就会全部团聚在左上角。所以当显示页面的时候，要显式的调用该函数。
官方对offset的解释：
Note: jQuery does not support getting the offset coordinates of hidden elements or accounting for borders, margins, or padding set on the body element.

2009/1/24 13:59:00 jQuery formValidator 3.3ver
在升级的过程中发现了一些bug，在这个版本里做了修正；使用新版的jQuery类库，精简了不少代码。
1、升级的过程中，把inputvalidator函数的里的属性defaultvalue弄错了，导致默认值都失效。
现更正为如下：
最后一个版本属性名为defaultval，现更正为了原来的属性名defaultvalue
checkbox和radio以及select控件都必须用数组进行初始化,请看demo1里的几个控件的默认值。

2、ajaxvalidator是大家问的最多的问题，修正一个bug（感谢网友“じ龍峸√”），并把大家最关心的问题，再做一次阐述。
bug现象：无论校验有没有校验通过，当控件再次得到焦点而再次失去焦点的时候tip里的提示就会停滞在得到焦点的提示
历次升级的相关记录：
a、为AjaxValidator添加一个addidvalue属性(是否自动添加id和值到url参数后面)
为了修复AjaxValidator在配置信息的时候,取不到运行时候值的bug，插件将自动在url后面自动添加,形式为"id=value"的网页参数。在服务器端,你可以通过Request.querystring["id"]来取值。具体演示请看demo1里的用户名输入和Default.aspx 
b、AjaxValidator校验方式，将自动再增加一个参数到请求的地址后面"clientid=触发校验的表单ID"。
如果你是一个jQuery集合做校验，如果用到了AjaxValidator校验方式,在服务器端，你无法知道触发校验的是哪个表单元素，所以在请求的地址后面追加"clientid=触发校验的表单ID"。

3、上次更新的过程中，压缩包里忘记放入datepicker日期控件，一起更正

 

2008/12/7 01:44:00 jQuery formValidator 3.2ver

1、为compareValidator里的datatype属性增加新的类型：date、datetime。
那么到目前为止，插件支持4种常类型:"string"、"number"、"date"、"datetime"，默认值为"string"

2、为inputValidator里的属性type增加类型为date、datetime，min和max必须为string类型，会自动转换
"size":表示比较长度 ，默认值
"number":数值型比较
"string":字符型比较
"date":短日期类型
"datetime":长日期类型

3、initConfig增加属性errorfocus，表示发生错误的时候，第一个出错控件是否获得焦点。默认获得焦点。

4、initConfig增加属性forcevalid属性;formValidator增加forcevalid属性，表示是否一直输入正确为止才允许离开焦点。
initConfig的forcevalid优先等级最高，即全局配置；而formValidator里的forcevalid是局部设置。

5、initConfig增加属性wideword,默认为false，表示是否把一个汉字当做一个长度的参数。
请见demo1最上面的按钮演示。

6、增加ajaxValidator对password控件的支持

7、修正升级中出现的一些bug,现都已修复
在升级的过程中，公用一个tip的功能丢失了。
bug描述：只显示第一个控件的信息，后面的控件正确与否都不理睬。
ajaxValidator的一些状态显示bug

 

2008/7/17 14:12:00 jQuery formValidator 3.1ver

1、为inputValidator增加empty属性。用于设置控件文本值是否允许两边为空。具体请看demo1里的密码的校验代码。
该属性是个对象，默认值{leftempty:true,rightempty:true,emptyerror:null}
leftempty:表示左边是否允许为空
rightempty:表示右边是否允许为空 
emptyerror：出现该错误的时候的提示，如果为null，则利用onerror属性来提示错误。 
注：只能在type:"size"的时候使用，即比较长度的时候。

2、修改自动构建提示层的语法。为formValidator函数增加relativeid属性。
relativeid：表示提示层相对定位的控件ID，如果为空，则用当前校验控件的ID。
tipid： 表示自动创建的提示层的ID，如果为空，则用当前校验控件的ID+"Tip"来命名。

3、修正ajaxValidator函数里beforesend属性的bug。代码忘记传递它的唯一参数。

4、修正ajaxValidator函数在后台无法获取中文的bug。

5、更新了升级记录、用户手册、增加了2个提问。

2008/6/21 19:05:00 jQuery formValidator 3.0ver
这次插件做了比较大的功能性升级。首先感谢网友“宇赫”和“axeon”在这次代码升级中给予的建议和支持。针对这次升级，所有的相关文档都已经修改，再次感谢网友“宇赫”在修改文档和测试的时候给予的帮助。

1、修改了插件公共函数和函数属性的命名。你可以用压缩包里update.exe程序自动更改你的校验代码。
所有的函数，首字母小写，其它单词首字母大写（匈牙利命名规范）。
例如:PageIsValid改成pageIsValid
所有的属性全部小写。

2、自动注册$.formValidator.pageIsValid()函数，为initConfig添加formid属性，表示表单ID号。如果formid为空，必须按照以前的方法自行判断，自己注册$.formValidator.pageIsValid()判断。
适用环境：如果你只有一个校验组，而且利用表单的submit来提交，你可以配置这个formid参数。
例如：$.formValidator.initConfig({formid:"form1",onerror:function(msg){alert(msg)}});

3、针对Input和Textarea两大类控件，你可以选择触发校验的事件，默认失去焦点的时候触发校验。因此为inputValidator增加一个属性：triggerevent，默认值："blur"，你可以设置为"change"。

4、自动构建提示层，你可以不用设置提示的DIV了。
为initConfig函数添加属性：autotip，默认false，表示：是否开启自动构建提示层。
例如：$.formValidator.initConfig({formid:"form1",autotip:true,onerror:function(msg){alert(msg)}}); 

样式的引用，请引用validatorAuto.css，这个样式是专为自动构建提示层用的。
代码： 

为formValidator函数添加属性：tipcss，用于定位自动提示层。该属性为标准的css属性申明。原tipid表示提示层相对位置的控件ID。默认情况下，自动提示层相对tipid，"left":"10px","top":"1px","height":"20px", "width":"250px"。
例如： tipcss:{"top":"1px","left":"60px"}。请注意属性名和值都必须带引号 
请特别关注一下demo1里性别的校验代码，这里需要调整一下x的坐标，代码如下：
$("input:radio[name='sex']").formValidator({tipid:"sex1",tipcss:{"left":"60px"},onshow:"请选择你的性别",onfocus:"没有第三种性别了，你选一个吧",oncorrect:"输入正确",defaultvalue:"2"}).inputValidator({min:1,max:1,onerror:"性别忘记选了,请确认"}).defaultPassed(); 

开启自动构建提示层的情况下，原tipid属性表示相对定位的目标控件的ID号
关闭自动构建提示层的情况下，原tipid属性的意义不变，表示提示层的ID号

5、修改扩展库里的正则表达式和函数。
修正国内电话的正则表达式。感谢网友"Hurray"提供的表达式。
修正IP4的正则表达式。感谢网友"六六"提供的表达式。
修正身份证校验函数，支持新的带x身份证 。感谢网友"宇赫"提供。

2008/5/21 18:42:00 jQuery formValidator 2.9.3 ver
1、增加对select-multiple的验证的支持，到现在为止插件已经支持所有控件的验证
用InputValidator来校验这种类型,对select-multiple而言InputValidator里的参数min和max表示选择的个数
示例代码：具体请见demo1里新增加的示例
$("#selectmore").formValidator({onshow:"按住CTRL可以多选",onfocus:"按住CTRL可以多选,至少选择2个",oncorrect:"谢谢你的合作"}).InputValidator({min:2,onerror:"至少选择2个"});

2、增加对checkbox设置多个默认值的支持。具体请见demo1里的选择兴趣爱好2里的代码
$("input:checkbox[@name='checkbox8']").formValidator({tipid:"test2Tip",onshow:"请选择你的兴趣爱好(至少选择2个,最多选择3个)",onfocus:"你至少选择2个,最多选择3个",oncorrect:"恭喜你,你选对了",defaultvalue:["7","8"]}).InputValidator({min:2,max:3,onerror:"你选的个数不对(至少选择2个,最多选择3个)"});
注意此时的defaultvalue必须是个Array

2008/4/27 18:42:00 jQuery formValidator 2.9.1 ver
1、InputValidator增加2个属性onerrormin和onerrormax,请见demo1里的[你的年龄]校验代码
onerrormin:当用户输入的值比min属性小的时候的错误提示
onerrormax:当用户输入的值比max属性大的时候的错误提示
原onerror属性:当onerrormin或onerrormax不存在的时候,用该属性来提示错误
2008/4/13 01:20:00 jQuery formValidator 2.9 ver
1、修正API帮助里的错误。
2、提供$.fn.unformValidator(true/false)来解除/恢复校验功能。true表示，解除校验功能，并会去掉提示。具体请看demo1里的身份证校验和该页面最上面的按钮。示例代码如下：
$("#sfzh").attr("disabled",true).unformValidator(true); 
3、提供$.formValidator.RetSetTipState(校验组号)来把提示内容恢复到onshow状态。
4、更改控件的校验顺序，提高校验的速度。现在依赖于你注册的顺序，请见demo1里的校验顺序。
你可以放置100来个控件在页面上，用2.9版本和2.4版本对比一下校验速度
5、优化了formValidator校验方式的算法。针对radio和checkbox现在只支持用name来注册校验
例如性别选择，有ID为"nan","nv"，name为"sex"，你目前只能这么写:
$("input:radio[name='sex']").formValidator({...}) 
6、废除formValidator里的onfocusevent和onblurevent。请自行利用JQ的事件功能。
7、修改、增加了扩展库里的内容。增加的内容如下：
提供函数:isTime isDate isDateTime 
调用的方法:$("#input_id").formValidator({...}).FunctionValidator({fun:isDateTime}); FunctionValidator的调用，请看帮助文档

提供正则:修改了9个正则表达式，增加了2个正则表达式
调用的方法: $("#input_id").formValidator({...}).RegexValidator({regexp:"num1",datatype:"enum",});
8、修改了压缩包里FAQ.html，增加、修改了提问和回答。
如果你在调用插件的时候碰到什么问题，可能FAQ里也有类似的问题，请参考回答来解决问题。
9、废除formValidator里的empty属性。用InputValidator({min:0})来实现可以为空的情况——某种意义上说，empty和InputValidator({min:0})是功能重复了。
10、更改了$.fn.DefaultPassed函数,设置函数参数.
没有参数/false：显示onSucess状态
true:显示onShow状态 
11、为了方便调试,为initConfig增加参数debug，表示是否处于调试状态，默认false,不会提交表单

2008/3/23 14:50:00 jQuery formValidator 2.4 ver
代码改动最少，但能尽量的满足大家业务需求——这个是我完善插件的目标
1、修正帮助里的错误。InputValidator校验方式里的参数type的详细解释更正为:(对select无效)"size":表示比较长度 "number":数值型比较;"string":"字符型比较"。
2、AjaxValidator校验方式，将自动再增加一个参数到请求的地址后面"clientid=触发校验的表单ID"。
如果你是一个jQuery集合做校验，如果用到了AjaxValidator校验方式,在服务器端，你无法知道触发校验的是哪个表单元素，所以在请求的地址后面追加"clientid=触发校验的表单ID"。
3、如果onshow,onfocus,oncorrect,onerror的内容为空，将不显示该提示内容。
4、废弃formValidator里的onvalid参数，用FunctionValidator校验方式来取代。例如:

$("#ewjy").formValidator({...,onvalid:function(elem,val){
if(val=="猫冬"){
return true;
}else{
return "额外校验失败,想额外校验通过，请输入\"猫冬\""
}})

可以这么取代
$("#ewjy").formValidator({...}).FunctionValidator(fun:function(val,elem){
if(val=="猫冬"){
return true;
}else{
return "额外校验失败,想额外校验通过，请输入\"猫冬\""
}
})

2008/3/14 12:16:00 jQuery formValidator 2.2 ver
帮助里一直有个错误，到今天才发现，表示抱歉。
1、修正帮助里的错误。InputValidator校验方式里的参数type的详细解释更正为:(对select无效)"size":表示比较长度 "number":数值型比较;"string":"字符型比较"。
2、AjaxValidator校验方式，将自动再增加一个参数到请求的地址后面"clientid=触发校验的表单ID"。
如果你是一个jQuery集合做校验，如果用到了AjaxValidator校验方式,在服务器端，你无法知道触发校验的是哪个表单元素，所以在请求的地址后面追加"clientid=触发校验的表单ID"。
3、如果onshow,onfocus,oncorrect,onerror的内容为空，将不显示该提示内容。
4、废弃formValidator里的onvalid参数，用FunctionValidator校验方式来取代。例如:

$("#ewjy").formValidator({...,onvalid:function(elem,val){
if(val=="猫冬"){
     return true;
}else{
     return "额外校验失败,想额外校验通过，请输入\"猫冬\""
}})

可以这么取代
$("#ewjy").formValidator({...}).FunctionValidator(fun:function(val,elem){
if(val=="猫冬"){
      return true;
}else{
     return "额外校验失败,想额外校验通过，请输入\"猫冬\""
}
})

2008/3/9 13:01:00 jQuery formValidator 2.1 ver
第一个压缩版已经放在压缩包里：formValidator_min.js；修改了GetLenght的代码；更新了demo1；更新了帮助。
1、第一个压缩版，包括版权申明在内，只有8.66k。
2、修改了getLenght函数。 GetLength function("表单元素id") 判断表单元素的选择长度（个数） checkbox或radiobutton表示(同组)选择的个数。
对select-one，InputValidator里的参数min和max表示选择的索引号范围
对select-more，InputValidator里的参数min和max表示选择的个数
其它input表示的表示字符长度。
2008/3/1 0:53:00 jQuery formValidator 2.0 ver
这次又做了一次比较大的调整：增加了FunctionValidator这种校验方式，现在你可以调用外部函数了；调整了内部部分算法；更新了demo1。
1、增加FunctionValidator校验方式。作用：你可以用外部函数对表单元素进行校验和处理，返回true/false表示校验是否成功;返回字符串表示自定义错误信息，校验失败;如果没有返回值表示处理过程，校验成功。范例代码如下：
$("#sfzh").formValidator({onshow:"请输入15或18位的身份证",onfocus:"输入15或18位的身份证",oncorrect:"输入正确"}).FunctionValidator({fun:isCardID});
fun这个参数给你的函数传递了2个参数(该表单元素的值,表单元素element) 。具体情况，请看API帮助文档 
2、当你调用PageIsValid的时候，如果未校验通过，则给onError传递2个参数(第一个校验没通过元素的错误信息,第一个校验没通过元素element)。范例代码如下：
$.formValidator.initConfig({onError:function(msg){alert(msg)}}); 
3、AjaxValidator校验方式增加一个配置参数buttons（你点提交的按钮(组)jQuery对象）。作用：当你触发了ajax校验，buttons里对应的按钮（组）就会灰掉，一直等待服务器返回数据为止。范例代码如下：
$("#test1").formValidator({...}).InputValidator({...}).AjaxValidator({
      url : "Default.aspx",
      datatype : "json",
      success : function(data){...},
      buttons: $("#button_id"),
      error: function(){alert("服务器没有返回数据，可能服务器忙，请重试");},
      onerror : "该用户名不可用，请更换用户名重新",
      onwait : "正在对用户名进行合法性校验，请稍候..."
}); 
4、由于增加了自定义错误信息的功能，为了跟FunctionValidator校验方式里"fun"函数返回意义统一，更改了formValidator里的onvalid参数返回的意义，给大家带来不便请谅解。返回true/false表示校验是否成功；返回字符串表示自定义错误信息，校验失败；如果没有返回值表示处理过程，校验成功。
2008/2/24 0:53:00 jQuery formValidator 1.3 ver
由于工作忙，网友提了很多珍贵的意见，到现在才更新插件，真的对不住！这次修改了几处不合理的地方。
特别增加了DefaultPassed函数，并且调整了表单元素校验的顺序。
1、增加DefaultPassed函数，作用：如果你的表单元素有默认值，而且是合法的，你可以通过这个，设置默认校验通过，示例代码如下：
$("#sex").formValidator({onshow:"请选择你的性别",onfocus:"没有第三种性别了，你选一个吧",oncorrect:"输入正确",defaultvalue:"1"}).InputValidator({min:1,max:1,onerror:"性别忘记选了,请确认"}).DefaultPassed();
2、修正了showalert模式下，只有值发生改变的时候才触发校验
3、修改了表单提交的时候，表单元素校验的顺序，现在按照表单元素的流顺序进行校验
4、demo1里集成了datatimemask插件，具体应用，请见“出生日期”的代码
5、避免了插件与别的javascript类库的$符号的冲突
6、修改了api帮助文档
2008/2/3 22:30:44 jQuery formValidator 1.2.1 ver
1、修复表单元素额外校验失败还会提交得bug,即formValidator里的onvalid属性
2008/1/25 23:30:56 jQuery formValidator 1.2.0 ver
这个版本，内部函数做了比较大的调整，开放了更多的函数提供给大家使用，使插件灵活性更大
特别申明：请保留插件的版权申明，谢谢
1、修改插件文件名为:formValidator.js ；对应的正则表达式的库也被命名为formValidatorRegex.js。
2、SelectValidator被合并到InputValidtor中去，请大家赶紧修改，语法兼容，只要替换名称即可。
3、因为InputValidtor合并了SelectValidator，所以API帮助里列举了InputValidtor各属性能起作用的各种表单类型
4、开放3个公共函数，这些函数跟你的配置相关：
SetFailState function("tipid","显示的信息") 在showword模式下，如果你的额外校验没有通过，你可以通过它来设置成失败信息和状态。 IsOneValid function("表单元素id") 主要来判断单个表单元素是否验证通过。 GetLength function("表单元素id") 判断表单元素的选择长度（个数） checkbox或radiobutton表示(同组)选择的个数。
select表示选择的selectedIndex值。
其它的表示字符长度。 5、formValidator里的onvalid属性，增加了返回值，即插件校验成功后，你还可以额外校验。例子请参见demo1里的【额外校验】
return true表示这个表单元素校验成功
return false表示这个表单元素校验失败
错误信息，你可以通过SetFailState函数要写
6、修复在firefox下，长度验证出错的bug。发现jQuery1.2不支持这么写：$("#textarea").attr("type")
2008/1/22 23:58:57 jQuery formValidator 1.1.2 ver
1、为AjaxValidator添加一个addidvalue属性(是否自动添加id和值到url参数后面)
      为了修复AjaxValidator在配置信息的时候,取不到运行时候值的bug
      插件将自动在url后面自动添加,形式为"id=value"的网页参数
      在服务器端,你可以通过Request.querystring["id"]来取值
      具体演示请看demo1里的用户名输入和Default.aspx
2008/1/22 18:35:38 jsvalidation 1.1.1 ver
1、紧急修复AjaxValidator校验状态出错,以及显示状态的bug
2、调整了内部OneIsValid和formValidator函数的算法,使判断更加合理、有效
2008/1/22 9:23:44 jQuery formValidator 1.1.0 ver
1、开放AjaxValidator表单验证,主要对$.ajax()的调用,具体演示请看demo1里的用户名输入和Default.aspx
      用户名在服务器端的校验，我是用了随机数取模，但是每次运行返回要么都是偶数要么都是奇数（不知道什么问题）。
先是长度校验，再是格式校验，最后才是服务器端校验
2、修正AjaxValidator校验状态出错,以及显示状态的问题bug。
3、修正对AjaxValidator的api帮助。
4、修正内部几个函数的一些bug。
5、未了适应AjaxValidator，调整formValidator初始化的一部分功能。
2008/1/17 20:25:29 jQuery formValidator 1.0.3 ver
1、把InputValidator的属性defaultvalue移到formValidator下。
      目前defaultvalue属性只支持input和select两种tag
2、增加demo1里的范例内容，增加了性别的选择和默认值的设置（性别、学历、爱国、国家区号、你的描述）。
3、增加RegexValidator的一个属性：datatype，支持外置正则表达式的枚举类型，具体请见demo3.html
      你可以额外包含这个js文件，定义一个数据类型,你可以自由的修改里面的名称和对应的值
var regexEnum = 
{
intege:"^([+-]?)\\d+$" //整数
}
如何调用范例：$("#zs").formValidator({onshow:"请输入整数",oncorrect:"谢谢你的合作，你的整数正确"}).RegexValidator({regexp:"intege",datatype:"enum",onerror:"整数格式不正确"});
4、修正自动纠错的一个bug
5、修正了api帮助文档
2008/1/15 0:50:40 jQuery formValidator 1.0.2 ver
1、为formValidator增加tipid属性。
        主要为了解决多个表单元素共用一个TIP的问题，提示错误的原则:后面的成功或失败信息都不覆盖前面的失败信息。针对这个属性，已经更新了demo1和源码，具体请看范例
2、修正了部分bug和api说明文档疏漏的地方
2008/1/11 20:35:08 jQuery formValidator 1.0.1 ver
1、修改formValidator下的属性onvalid
增加2个参数，参数1：对象本身 参数2：值。主要是校验通过后，你还希望执行一些操作，你可以方便的取到对象和值
2、去掉InputValidator、SelectValidator、CompareValidator、RegexValidator、AjaxValidator下的onvalid属性
写文档的时候太过匆忙，所以属性加多了，帮助文档和源码都已经修正
3、为formValidator增加属性:automodify,默认值：false。
这个属性只要针对，如果你输入的是非法的，离开焦点的时候将自动恢复上次的值,并且先都有提示,showword模式的提示变成onshow状态
4、为formValidator增加onfocusevent和onblurevent
因为jQuery的事件注册是覆盖的，不是attachEvent追加的，所以再托管出这两个被插件霸占住的事件onfocus和onblur
onfocusevent:获得焦点的时候，处理系统自动处理的代码后，继续你希望再执行的代码
onblurevent:失去焦点的时候，处理系统自动处理的代码后，继续你希望再执行的代码
5、提交验证过程中，如果没有验证通过，则第一个出错的获得焦点
6、申明一点：RegexValidator采用的是显式构造函数new RegExp("pattern"[,"flags"]); 由于Javascript 中'\' 被用作转义字符，所以在使用显示构造函数构造实例对象的时候，需要使用'\\' 代替'\'