[转摘]jQuery formValidator表单验证插件开源了!!含API帮助、源码、示例

出处：jQuery formValidator表单验证插件开源了!!含API帮助、源码、示例 

正文：

升级记录
2.1
第一个压缩版已经放在压缩包里：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表示的表示字符长度。

2.0
这次又做了一次比较大的调整：增加了FunctionValidator这种校验方式，现在你可以调用外部函数了；调整了内部部分算法；
你打开下载压缩包里的index.html，将会看到全新的演示。
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表示校验是否成功；返回字符串表示自定义错误信息，校验失败；如果没有返回值表示处理过程，校验成功。


1.3
由于工作忙，网友提了很多珍贵的意见，到现在才更新插件，真的对不住！这次修改了几处不合理的地方。
特别增加了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帮助文档


1.2.1
修复表单元素额外校验失败还会提交得bug,即formValidator里的onvalid属性

1.2.0   
这个版本，内部函数做了比较大的调整，开放了更多的函数提供给大家使用，使插件灵活性更大
特别申明：请保留插件的版权申明，谢谢
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")


1.1.2
1、为AjaxValidator添加一个addidvalue属性(是否自动添加id和值到url参数后面)
为了修复AjaxValidator在配置信息的时候,取不到运行时候值的bug
插件将自动在url后面自动添加,形式为"id=value"的网页参数
在服务器端,你可以通过Request.querystring["id"]来取值
具体演示请看demo1里的用户名输入和Default.aspx


1.1.1版本
1、紧急修复AjaxValidator校验状态出错,以及显示状态的bug
2、调整了内部OneIsValid和formValidator函数的算法,使判断更加合理、有效

1.1 功能比较全的一个版本.
1、开放AjaxValidator表单验证,主要对$.ajax()的调用,具体演示请看demo1里的用户名输入和Default.aspx
      用户名在服务器端的校验，我是用了随机数取模，但是每次运行返回要么都是偶数要么都是奇数（不知道什么问题）。
      先是长度校验，再是格式校验，最后才是服务器端校验
2、修正AjaxValidator校验状态出错,以及显示状态的问题bug。
3、修正对AjaxValidator的api帮助。
4、修正内部几个函数的一些bug。
5、未了适应AjaxValidator，调整formValidator初始化的一部分功能。

1.0.3
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帮助文档


1.0.2版本
1、为formValidator增加tipid属性。
主要为了解决多个表单元素共用一个TIP的问题，提示错误的原则:后面的成功或失败信息都不覆盖前面的失败信息
针对这个属性，已经更新了demo1和源码，具体请看范例
2、修正了部分bug和api说明文档疏漏的地方


1.0.1版本
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 中'/' 被用作转义字符，所以在使用显示构造函数构造实例对象的时候，需要使用'//' 代替'/'

1、插件应用效果图浏览

效果图1：


效果2：



2、jQuery pageValidator插件主要功能

1、2种错误提示模式：文字提示、窗口提示
2、呈现时的提示
3、可以为空，空时的提示
4、获得焦点提示
5、发生不同种错误，给出不同的提示
6、可以为空，不为空时要检验控制
7、长度控制、值比较
8、范围控制
9、2个对象比较控制
10、选择个数控制
11、Ajax读取数据
12、正则表达式控制
13、同个页面，你可以划分多个校验组，每个组的校验都是互不影响的
14、单个对象或者整个校验组验证完成、或者出错，有额外的回调函数提供

下载 http://www.cnblogs.com/Files/wzmaodong/formValidator2.1.rar



5、示例代码

<script type="text/javascript">
$(document).ready(function(){
 $.formValidator.initConfig({onError:function(){alert("校验没有通过，具体错误请看错误提示")}});
 $("#test1").formValidator({onshow:"请输入用户名",onfocus:"用户名至少6个字符,最多10个字符",oncorrect:"恭喜你,你输对了"}).InputValidator({min:6,max:10,onerror:"你输入的用户名非法,请确认"});
 $("#test2").formValidator({onshow:"请选择你的兴趣爱好(至少选择3个,最多选择5个)",onfocus:"你至少选择3个,最多选择5个",oncorrect:"恭喜你,你选对了"}).InputValidator({min:3,max:5,onerror:"你选的个数不对(至少选择3个,最多选择5个)"});
 $("#test3").formValidator({onshow:"请选择你的兴趣爱好（至少选一个）",onfocus:"你至少选择1个",oncorrect:"恭喜你,你选对了"}).InputValidator({min:1,onerror:"你选的个数不对"});
 $("#xueli").formValidator({onshow:"请选择你的学历",onfocus:"学历必须选择",oncorrect:"谢谢你的配合"}).SelectValidator({onerror: "你是不是忘记选择学历了!"});
 $("#password1").formValidator({onshow:"请输入密码",onfocus:"两次密码必须一致哦",oncorrect:"密码一致"}).InputValidator({min:1,onerror:"密码不能为空,请确认"}).CompareValidator({desID:"password2",operateor:"=",onerror:"2次密码不一致,请确认"});
 $("#nl").formValidator({onshow:"请输入的年龄（1-99岁之间）",onfocus:"只能输入1-99之间的数字哦",oncorrect:"恭喜你,你输对了"}).InputValidator({min:1,max:99,type:"value",onerror:"年龄必须在1-99之间，请确认"});
 $("#aiguo").formValidator({onshow:"爱国的人一定要选哦",onfocus:"你得认真思考哦",oncorrect:"不知道你爱不爱，反正你是选了"}).InputValidator({min:1,max:1,onerror:"难道你不爱国？你给我选！！！！"});
 $("#shouji").formValidator({empty:true,onshow:"请输入你的手机号码，可以为空哦",onfocus:"你要是输入了，必须输入正确",oncorrect:"谢谢你的合作",onempty:"你真的不想留手机号码啊？"}).InputValidator({min:11,max:11,onerror:"手机号码必须是11位的,请确认"}).RegexValidator({regexp:"^[1][0-9]{10}$",onerror:"你输入的手机格式不正确"});
 $("#lxdh").formValidator({empty:true,onshow:"请输入你的联系电话，可以为空哦",onfocus:"你要是输入了，必须输入正确，格式例如：0577-88069620",oncorrect:"谢谢你的合作",onempty:"你真的不想留联系电话了吗？"}).RegexValidator({regexp:"^[[0-9]{3}-|/[0-9]{4}-]?(/[0-9]{8}|[0-9]{7})?$",onerror:"你输入的联系电话格式不正确"});
 $("#ms").formValidator({onshow:"请输入你的描述",onfocus:"描述至少要输入10个汉字或20个字符",oncorrect:"恭喜你,你输对了"}).InputValidator({min:20,onerror:"你输入的描述长度不正确,请确认"});
});
</script>


6、特别说明

如果你在使用过程中碰到什么问题请给我留言，发现bug请不要自行修改，也请留言，达到完善插件的目的，真正服务每个程序开发人员 .
请保留插件的版权申明，谢谢  

3、jQuery pageValidator插件 API帮助文档

目前支持5种大的校验方式，分别是：InputValidator（针对input、textarea、select控件的字符长度、值范围、选择个数的控制）、CompareValidator（提供2个对象的比较，目前可以比较字符串和数值型）、AjaxValidator（通过ajax到服务器上做数据校验）、RegexValidator（提供可扩展的正则表达式库） 、FunctionValidator （提供可扩展函数库来做校验） 每种格式支持的控件类型如下：   input textarea select 校验方式 text radio checkbox file password textarea select-one InputValidator √ √ √ √ √ √ √ CompareValidator √     √ √ √   AjaxValidator √     √ √ √ √ RegexValidator √     √ √ √   FunctionValidator √ √ √ √ √ √ √ 如果你用了不支持的校验功能，插件将忽略这个校验功能。
插件目前提示错误，有两种模式：showword和showalert,即文字提示和窗口提示，下面的4大验证方式，针对showalert这种方式不是都必须的，有些配置是没有作用的 下面分别罗列全局初始化和5种校验方式公开的属性
formValidator:	用来做初始化的类型，必须先执行。（"√"为showalert可用参数）
属性 属性名称 默认值 showalert 详细解释 validatorGroup 校验组 "1" √ 一个页面的控件可以分成多个组，分开校验 empty 是否可以为空 false √   automodify 输入错误离开焦点的时候，自动修复错误 false √ 先给出提示然后，自动修复，目前只支持text、file、textarea三种类型 onempty 空时候的提示 "输入内容为空"   可以为空，为空时候的提示 onshow 显示时候的提示 "请输入内容"     onfocus 获得焦点的提示 "请输入内容"     oncorrect 输入正确后的提示 "输入正确"   当你焦点离开控件的时候，如果输入正确将出现该提示 onvalid 校验通过后的回调函数 null √ 参数1：对象本身 参数2：值 校验通过后，你还希望执行一些操作，你可以通过这个属性来执行。 返回值的意义： true/false 校验成功/失败 字符串 校验失败，返回值当作自定义错误 无 处理过程 onfocusevent 获得焦点后要追加的回调函数 null √ 参数1：对象本身 onblurevent 失去焦点后要追加的回调函数 null √ 参数1：对象本身 tipid 显示错误的容器ID 表单ID+"Tip"     defaultvalue 默认值 null √ 所有input和select表单。如果你不设置就保持原值，一旦设置就设为默认值。
InputValidator：
属性 属性名称 默认值 详细解释 type 比较类型 "size" (对select无效)"size":表示比较长度 "value":比较值。 min 最小长度/值 0 对select-one而言InputValidator里的参数min和max表示选择的索引号范围 对select-more而言InputValidator里的参数min和max表示选择的个数 max 最大长度/值 99999999999999 同上 onerror 发生错误的提示 "输入错误"   defaultvalue 默认值 null 能满足预设默认值的需求
CompareValidator：
属性 属性名称 默认值 详细解释 desID 要比较控件的ID "" 要跟源目标进行比较的目标ID operateor 比较符号 "=" 一共有如下几种类型:=、!=、>、>=、<、<= datatype 数据类型 "string" 目前只支持2种:"string"、"number" onerror 发生错误的提示 "输入错误"
RegexValidator:
属性 属性名称 默认值 详细解释 regexp 正则表达式 "" 采用的是显式构造函数new RegExp("pattern"[,"flags"]); 由于Javascript 中'/' 被用作转义字符，所以在使用显示构造函数构造实例对象的时候，需要使用'//' 代替'/' param 附加参数 "i" g：代表可以进行全局匹配。 i：代表不区分大小写匹配。 m：代表可以进行多行匹配。 可以任意组合,当然也可以不加参数 datatype 数据类型 "string" "string":自己写的表达式，"enum":枚举名。具体请见demo3.htm，你可以自己修改附加pageValidatorRegex.js里的枚举项目名和表达式。 onerror: 发生错误的提示 "输入错误"
AjaxValidator:	几乎所有的属性跟$.ajax()的属性一样，请参考$.ajax()函数的帮助
属性 属性名称 默认值 详细解释 type 请求的类型 "GET" "POST" 或 "GET" url 发送到的URL地址 ""   datatype 返回的数据类型 "html" xml、html、script、json data 数据 ""   async 是否以异步的方式发送 true   success 当请求成功时调用的函数 null   processdata 自动处理返回的数据为字符串 true 在默认的情况下，如果data选项传进的数据是一个对象而不是字符串，将会自动地被处理和转换成一个查询字符串 complete 当请求完成时调用的函数 null   beforesend 当请求前时调用的函数 null   buttons 你点提交的按钮(组)jQuery对象 null 当你触发了ajax校验，buttons里对应的按钮（组）就会灰掉，一直等待服务器返回数据为止 error 当请求失败时调用的函数 "请求失败" 你可以自己定义这个错误，在error里自动打出
FunctionValidator
属性 属性名称 默认值 返回值的解释 fun 外部函数名 默认当作处理过程 true/false 校验成功/失败 字符串 校验失败，返回值当作自定义错误 无 处理过程
公共函数:	主要是设置全局参数和判断是否通过校验
函数名 函数说明 $.formValidator.initConfig 参数：配置类型 属性 默认值 说明 validatorGroup "1" 你要针对哪个组进行配置 alertMessage false 是否弹出窗口 onSuccess null 该组校验通过后的回调函数,返回false，阻止表单的提交 submitOnce false 校验通过后，是否灰掉所有的提交按钮 onError null 该组校验失败后的回调函数， 有两个参数 第一个 一个校验没有通过的错误信息 第二个 一个校验没有通过的元素对象 $.formValidator.PageIsValid 一个参数： 不是配置类型 validatorGroup "1" 你要针对哪个组进行验证 $.formValidator.IsOneValid 一个参数： 当时设置验证的表单元素ID。 返回是否校验成功的信息。 $.formValidator.SetFailState function("tipid","显示的信息") 在showword模式下，如果你的额外校验没有通过，你可以通过它来设置成失败信息和状态 $.formValidator.GetLength function("表单元素id") checkbox或radiobutton表示(同组)选择的个数。 对select-one，InputValidator里的参数min和max表示选择的索引号范围 对select-more，InputValidator里的参数min和max表示选择的个数 其它input表示的表示字符长度。

4、下载API帮助、源码、示例