jQuery formValidator表单验证插件

jQuery formValidator表单验证插件是什么?

jQuery formValidator表单验证插件，它是基于jQuery类库，实现了js脚本于页面html代码的分离。你可以划分多个校验组，每个组的校验都是互不影响。对一个表单对象，你只需要写一行代码就可以轻松实现无数种（理论上）脚本控制。目前支持5种大的校验方式，分别是：inputValidator（针对input、textarea、select控件的字符长度、值范围、选择个数的控制）、compareValidator（提供2个对象的比较，目前可以比较字符串和数值型）、ajaxValidator（通过ajax到服务器上做数据校验）、regexValidator（提供可扩展的正则表达式库） 、functionValidator （可使用外部函数来做校验）

本插件于其他校验控件最大的区别有3点：

1、校验功能可以扩展。

对中文、英文、数字、整数、实数、Email地址格式、基于HTTP协议的网址格式、电话号码格式、手机号码格式、货币格式、邮政编码、身份证号码、QQ号码、日期等等这些控制，别的表单校验控件是代码里写死的，而formValidator是通过外部js文件来扩展的，你可以通过写正则表达式和函数来无限的扩展这些功能。

2、实现了校验代码于html代码的完全分离。

你的所有信息都无需配置在校验表单元素上，你只要在js上配置你的信息。使美工（界面）和javascript工程师的工作不交织在一起

3、你只需写一行代码就能完成一个表单元素的所有校验。你只需要写一行代码就能完成一下所有的控制

















支持所有类型客户端控件的校验

支持jQuery所有的选择器语法，只要控件有唯一ID和type属性

支持函数和正则表达式的扩展。提供扩展库，你可以自由的添加、修改里面的内容。

支持2种校验模式。第一种：文字提示(showword模式)；第二种：弹出窗口提示(showalert模式)

支持多个校验组。如果一个页面有多个提交按钮，分别做不同得提交，提交前要做不同的校验，所以你得用到校验组的功能。

支持4种状态的信息提示功能，可以灵活的控制4种状态是否显示。第一种：刚打开网页的时候进行提示；第二种：获得焦点的时候进行提示；第三种：失去焦点时，校验成功时候的提示；第四种：失去焦点时，校验失败的错误提示。

支持自动构建提示层。可以进行精确的定位。

支持自定义错误提示信息。

支持控件的字符长度、值范围、选择个数的控制。值范围支持数值型和字符型；选择的个数支持radio/checkbox/select三种控件



支持2个控件值的比较。目前可以比较字符串和数值型。



支持服务器端校验。



支持输入格式的校验。





更新记录

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"的网页参数。在服务器端,你可以通过tring["id"]来取值。 具体演示请看demo1里的用户名输入和

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、修改了插件公共函数和函数属性的命名。你可以用压缩包里程序自动更改你的校验代码。

所有的函数，首字母小写，其它单词首字母大写（匈牙利命名规范）。

例如:PageIsValid改成pageIsValid

所有的属性全部小写。

2、自动注册$.Valid()函数，为initConfig添加formid属性，表示表单ID号。如果formid为空，必须按照以前的方法自行判断，自己注册$.Valid()判断。

适用环境：如果你只有一个校验组，而且利用表单的submit来提交，你可以配置这个formid参数。

例如：$.nfig({formid:"form1",onerror:function(msg){alert(msg)}});

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

4、自动构建提示层，你可以不用设置提示的DIV了。

为initConfig函数添加属性：autotip，默认false，表示：是否开启自动构建提示层。

例如：$.nfig({formid:"form1",autotip:true,onerror:function(msg){alert(msg)}});

样式的引用，请引用，这个样式是专为自动构建提示层用的。

代码：

href="style/" />

为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、提供$.Validator(true/false)来解除/恢复校验功能。true表示，解除校验功能，并会去掉提示。具体请看demo1里的身份证校验和该页面最上面的按钮。示例代码如下：

$("#sfzh").attr("disabled",true).unformValidator(true);

3、提供$.TipState(校验组号)来把提示内容恢复到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",dat

atype:"enum",onerror="..."});

8、修改了压缩包里，增加、修改了提问和回答。

如果你在调用插件的时候碰到什么问题，可能FAQ里也有类似的问题，请参考回答来解决问题。

9、废除formValidator里的empty属性。用InputValidator({min:0})来实现可以为空的情况——某种意义上说，empty和InputValidator({min:0})是功能重复了。

10、更改了$.tPassed函数,设置函数参数.

没有参数/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_；修改了GetLenght的代码；更新了demo1；更新了帮助。

1、第一个压缩版，包括版权申明在内，只有8.66k。

2、修改了getLenght函数。

判断表单元素的选择长度（个数）

checkbox或radiobutton表示(同组)选择的个数。

function("表单对select-one，InputValidator里的参数min和GetLength

max表示选择的索引号范围

元素id")

对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)。范例代码如下：

$.nfig({onError:function(msg){alert(msg)}});

3、AjaxValidator校验方式增加一个配置参数buttons（你点提交的按钮(组)jQuery对象）。作用：当你触发了ajax校验，buttons里对应的按钮（组）就会灰掉，一直等待服务器返回数据为止。范例代码如下：

$("#test1").formValidator({...}).InputValidator({...}).AjaxValidator({

url : "",

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、修改插件文件名为: ； 对应的正则表达式的库也被命名为。

2、SelectValidator被合并到InputValidtor中去，请大家赶紧修改，语法兼容，只要替换名称即可。

3、因为InputValidtor合并了SelectValidator，所以API帮助里列举了InputValidtor各属性能起作用的各种表单类型

4、开放3个公共函数，这些函数跟你的配置相关：

在showword模式下，如果你的额外校验function("tipid","SetFailState 没有通过，你可以通过它来设置成失败信显示的信息")

息和状态。

IsOneValid function("表单元素主要来判断单个表单元素是否验证通过。

id")

判断表单元素的选择长度（个数）

GetLength

function("表单元素checkbox或radiobutton表示(同组)选择的个数。

id")

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"的网页参数

在服务器端,你可以通过tring["id"]来取值

具体演示请看demo1里的用户名输入和



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里的用户名输入和

用户名在服务器端的校验，我是用了随机数取模，但是每次运行返回要么都是偶数要么都是奇数（不知道什么问题）。

先是长度校验，再是格式校验，最后才是服务器端校验

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，支持外置正则表达式的枚举类型，具体请见

你可以额外包含这个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 中'' 被用作转义字符，所以在使用显示构造函数构造实例对象的时候，需要使用'' 代替''

下载

最新版本：3.3，更新日期：2009/01/24[下载]

请实时关注插件的更新，请访问我的博客

其他相关作品

jQuery formValidator表单校验代码生成器ver1.1

摘要: jQuery formValidator表单校验插件，你只需要写一行代码就可以轻松实现20多种脚本控制，实现了js脚本于页面的分离。

jQuery formValidator表单校验代码生成器是针对jQuery formValidator表单校验插件ver2.4版本来写的。书写这个生成器的目的：

1、减少书写错误。主要是配置参数容易书写错误，JS是认大小写。

2、提高代码复用性。

3、让不懂JS的人更容易上手。

4、不用记忆配置参数。

最新版本：1.1，更新日期：2008/04/06 [下载] 插件更新网址，请点击这里

jQuery DateTimeMask日期掩码插件

摘要: jQuery DateTimeMask日期掩码插件，它是基于jQuery类库，实现了js脚本于页面的分离。

你只要写一句话:$("#input_id").DateTimeMask()，就能完美的实现5种日期掩码的输入控制,目前在ie6.0和firefox3.0下调试通过。该插件提供了回调函数，你可以利用它轻松的封装成服务器端控件，你可以把插件的属性变成服务器端属性。支持的掩码格式有:1:yyyy-MM-dd HH:mm:ss 2:yyyy-MM-dd HH:mm

3:yyyy-MM-dd 4:HH:mm 5:HH:mm:ss

最新版本：1.0，更新日期：2008/02/10 [下载] 插件更新网址，请点击这里

jQuery inputMask字母数字下划线掩码插件

摘要: jQuery inputMask掩码插件，它是基于jQuery类库，实现了js脚本于页面的分离，是一个很简单的掩码控制插件（简单的不敢拿出来），实现对字母、数字、下划线三种类型的输入控制，你可以任意组合。这个插件的应用场合，主要是：1、用户名的输入；2、配合autoComplete做输入控制（你可能根据拼音或者五笔来查找数据）；3、一些常规的数据输入。目前该插件在ie6.0和firefox3.0下调试通过。

最新版本：1.0，更新日期：2008/02/27 [下载] 插件更新网址，请点击这里

用户手册

目录

1. jQuery formValidator是什么？

2. jQuery formValidator能做什么，不能做什么？

3. 什么情况下，我应该使用jQuery formValidator？

4. 快速开始

5. 使用jQuery formValidator必须加载的文件

6. jQuery formValidator插件的API帮助

7. 其他补遗

1. jQuery formValidator表单验证插件是什么？ [top]

jQuery formValidator表单验证插件是客户端表单验证插件。

在做B/S开发的时候，我们经常涉及到很多表单验证，例如新用户注册，填写个人资料，录入一些常规数据等等。在这之前，页面开发者（JavaScript开发者）需要编写大量的JavaScript来进行表单元素的校验，而这些校验在平

时开发中不停的重复书写。

常见的校验如不能为空，必须满足长度要求，必须为数字，必须为Email等等。一般要判断的表单元素比较多，开发过程就显得枯燥无味——重复的代码不断重复，而且可能还要兼容多种浏览器，更多的考虑因素使人头疼不已。由于每个要校验的页面虽然逻辑基本相同，但是在大多数情况下，出于种种原因，开发者宁愿再编写一套JS文件，为了便于管理。

jQuery formValidator表单插件致力于改善这一过程。你只关心业务逻辑，而无需关系实现过程,只需简单的配置，无需写代码就能实现表单的检验。它包括常规检验功能和可扩展校验功能。针对每个表单元素你只需要写一行配置信息就能完成校验。而这些配置信息无需写入表单元素，实现了js代码和html代码的分离。这样做的好处，使B/S开发过程中，分工更加明确，页面设计着只需关心他的页面（设计的时候不必担心把脚本弄坏了），javascript开发者只需关心脚本的开发。

而插件本身包含的校验方式可以有无数种，只要你扩展正则表达式和函数。本插件于同类校验插件最大的区别：校验功能可以扩展；实现了校验代码于html代码的完全分离；你只需写一行配置信息就能完成一个表单元素的所有校验。插件本身提供了很多回调函数，使调用者能最大限度的发挥自己的想象能力来完成自己的业务需求。 在同一个页面你可以拥有很多个校验组，你只需在提交的按钮那里调用

return Valid('校验组号') 来完成多个组的校验，互不干扰。

插件具备跨浏览器的能力。目前在ie和ff两种浏览器下调试通过，你不用再考虑在多浏览器下如何兼容，jQuery formValidator帮你做到了这些。

2. jQuery formValidator能做什么，不能做什么？ [top]

jQuery formValidator表单校验插件支持的验证功能（还有很多功能没有罗列）罗列如下：



















支持所有类型客户端控件的校验

支持jQuery所有的选择器语法，只要控件有唯一ID和type属性。

支持函数和正则表达式的扩展。提供扩展库，你可以自由的添加、修改里面的内容。

支持2种校验模式。第一种：文字提示(showword模式)；第二种：弹出窗口提示(showalert模式)

支持多个校验组。如果一个页面有多个提交按钮，分别做不同得提交，提交前要做不同的校验，所以你得用到校验组的功能。

支持4种状态的信息提示功能，可以灵活的控制4种状态是否显示。第一种：刚打开网页的时候进行提示；第二种：获得焦点的时候进行提示；第三种：失去焦点时，校验成功时候的提示；第四种：失去焦点时，校验失败的错误提示。

支持自动构建提示层。

支持自定义错误提示信息。

支持控件的字符长度、值范围、选择个数的控制。值范围支持数值型和字符型；选择的个数支持radio/checkbox/select三种控件

支持2个控件值的比较。目前可以比较字符串和数值型。



支持服务器端校验。



支持输入格式的校验。



jQuery formValidator不能做的：

目前对控件ID是动态产生的情况支持的不是很好。例如里的gridview控件，因为它的每行数据都是动态产生的，捕捉不到控件的ID。不过你硬要写，也是能实现的。



其他没有提到的，很希望你能告诉我们。



3. 什么情况下，我应该使用jQuery formValidator？ [top]

只要控件ID是一定的，即：控件ID是你自己指定的，这种情况你都可以调用。当然动态产生ID的，你也可以调用。jQuery formValidator可以帮助你减轻客户端校验编程的压力，让你有更多的精力投入对业务的关注中。

无论你是大型系统还是小型系统都适合调用本插件，本插件的压缩版本只有6K（可能本网页的一张图片就有几十K），个人认为可以忽略网页的加载时间。

4. 快速开始 [top]

你可以有两种方法快速开始（看到效果）

直接查看Demo页面 （goto>>）



下载最新的版本，直接在本地查看。（goto>>）



无论是那种方法，演示的例子中都有详细的步骤，以及对应的代码。

5. 使用插件必须加载的文件 [top]

//加载jQuery类库

//加载插件的样式库，如果你是自动构建提示层，请加载

href="style/">

//加载插件

//加载扩展库

6 jQuery formValidator插件的API帮助[top]

目前支持5种大的校验方式，分别是：inputValidator（针对input、textarea、select控件的字符长度、值范围、选择个数的控制）、compareValidator（提供2个对象的比较，目前可以比

较字符串和数值型）、ajaxValidator（通过ajax到服务器上做数据校验）、regexValidator（提供可扩展的正则表达式库） 、functionValidator （提供可扩展函数库来做校验）

每种格式支持的控件类型如下：

校验方式

inputValidator

ajaxValidator

regexValidator

√

√

√

√

√

input

√

√

√

√

√

√

√

√

√

√

√

√

textarea select

√

√

√

√

√

√

√

√

text radio checkbox file password textarea select-one

compareValidator √

functionValidator √

如果你用了不支持的校验功能，插件将忽略这个校验功能。

插件目前提示错误，有两种模式：showword和showalert,即文字提示和窗口提示，下面的4大验证方式，针对showalert这种方式不是都必须的，有些配置是没有作用的

下面分别罗列全局初始化和5种校验方式公开的属性

formValidator:

属性 属性名称 默认值

"1"

用来做初始化的类型，必须先执行。（"√"为showalert可用参数）

showalert 详细解释

√

√

√

一个页面的控件可以分成多个组，分开校验

先给出提示然后，自动修复，目前只支持text、file、textarea三种类型

可以为空，为空时候的提示。为空者不显示

为空者不显示

为空者不显示

当你焦点离开控件的时候，如果输入正确将出现该提示。为空者不显示

如果不自动构建提示层，表示提示成的ID号

validatorgroup 校验组

empty

automodify

是否可以为false

空

输入错误离false

开焦点的时候，自动修复错误

onempty

onshow

onfocus

oncorrect

空时候的提"输入内容为空"

示

显示时候的"请输入内容"

提示

获得焦点的"请输入内容"

提示

输入正确后"输入正确"

的提示

显示错误的表单ID+"Tip"

容器ID

tipid

如果自动构建提示层，表示提示层相对的目标控件

tipcss 自动构建的"left":"10px",

提示层的样"top":"1px",

式 "height":"20px",

"width":"250px"

强制输入的true

值必须有效

null

√

√

主要用于定位自动构建的提示层

forcevalid 是否把一个全角字符当做2个长度的参数

所有input和select表单。如果你不设置就保持原值，一旦设置就设为默认值。

defaultvalue 默认值

inputValidator：

属性默认值

名称

比"size"

较类型

属性 详细解释

type (对select无效)

"size":表示比较长度 ，默认值

"number":数值型比较

"string":字符型比较

"date":短日期类型

"datetime":长日期类型

默认数值型。如果进行字符比较，请收入字符型

对select-one而言inputValidator里的参数min和max表示选择的索引号范围

对select-multiple而言inputValidator里的参数min和max表示选择的个数

min 最0

小长度/值

max

最大长99999999999 同上

度/值

发"输入错误" 为空者不显示。

生错误的提onerror

示

onerrormin 比null

min属性小的提示

onerrormax 比null

max属性大的提示

empty

当用户输入的值比min属性小的时候的错误提示

当用户输入的值比max属性大的时候的错误提示

控两边都允许默认值件出现空 {leftempty:true,rightempty:true,emptyerror:null}

文leftempty:表示左边是否允许为空

本rightempty:表示右边是否允许为空

值emptyerror：出现该错误的时候的提示，如果为null，是则利用onerror属性来提示错误。

否允许两边为空

默认值 详细解释

要跟源目标进行比较的目标ID

一共有如下几种类型:=、!=、>、>=、<、<=

目前只支持2种:"string"、"number","datetime","date"

属性名称

compareValidator：

属性

desid

要比较控件""

的ID

"="

"string"

operateor 比较符号

datatype 数据类型

onerror

发生错误的"输入错误为空者不显示。

提示 "

regexValidator:

属性

属性默认值

名称

详细解释

regexp 正则""

表达式

param 附加"i"

参数

采用的是显式构造函数new

RegExp("pattern"[,"flags"]); 由于Javascript 中''

被用作转义字符，所以在使用显示构造函数构造实例对象的时候，需要使用'' 代替''

g：代表可以进行全局匹配。

i：代表不区分大小写匹配。

m：代表可以进行多行匹配。

可以任意组合,当然也可以不加参数

datatype 数据"string" "string":自己写的表达式，"enum":枚举名。具体请见类型

你可以自己修改、添加里的枚举项目名和表达式。

onerror: 发生"输入错错误误"

的提示

为空者不显示。

ajaxValidator:

属性

type

url

datatype

data

async

success

属性名称

请求的类型

几乎所有的属性跟$.ajax()的属性一样，请参考$.ajax()函数的帮助

默认值 详细解释

"GET" "POST" 或 "GET"

在默认的情况下，如果data选项传进的数据是一个对象而不是字符串，将会自动地被处理和转换成一个查询字符串

有个一个参数，根$.ajax里的beforeSend参数一样。

发送到的URL地址 ""

数据

是否以异步的方式发送

当请求成功时调用的函数

""

true

null

true

返回的数据类型 "html" xml、html、script、json

processdata 自动处理返回的数据为字符串

当请求完成时调用的函数

当请求前时调用的函数

complete

beforesend

null

null

buttons 你点提交的按钮null

(组)jQuery对象

当请求失败时调用的函数

当你触发了ajax校验，buttons里对应的按钮（组）就会灰掉，一直等待服务器返回数据为止

error "请求失你可以自己定义这个错误，在error里自动败" 打出。为空者不显示。

functionValidator

属性

fun

属性名称 默认值 返回值的解释

true/false 校验成功/失败

校验失败，返回值当作自字符串

定义错误

无 处理过程

外部函数名() 默认当作处理参数1:元素的过程

值,

参数2:元素对象

"输入错误" onerror 发生错误的提示

函数return false的时候，显示该错误信息

主要是设置全局参数和判断是否通过校验

公共函数:

函数名

$.nfig

函数说明

参数：配置类型

属性

默认说明

值

要自动注册pageIsValid函数的表单ID号

validatorgroup "1" 你要针对哪个组进行配置

formid ""

alertmessage false 是否弹出窗口

autotip

errorfocus

forcevalid

wideword

onsuccess

false 是否自动构建提示层

true 发生错误的时候，第一个出错控件是否获得焦点

true 是否一直输入正确为止才允许离开焦点

true 是否把一个全角字符当做2个长度

null 该组校验通过后的回调函数,返回false，阻止表单的提交

校验通过后，是否灰掉所有的提交按false

钮

null 该组校验失败后的回调函数， 有两个参数

submitonce

onerror

一个校验没有通过的错误信参数1

息

一个校验没有通过的元素对参数2

象

debug false 是否处于调试模式。true:不提交表单

你要针对哪个组进行验证

$.Valid

$.alid

一个参数： 不是配置类型

validatorgroup "1"

一个参数： 当时设置验证的表单元素ID。

返回是否校验成功的信息。

$.lState function("tipid","显示的信息")

在showword模式下，如果你的额外校验没有通过，你可以通过它来设置成失败信息和状态

$.gth function("表单元素id")

checkbox或radiobutton表示(同组)选择的个数。

对select-one，选择索引的值

对select-multiple，inputValidator里的参数min和max表示选择的个数

其它input表示的表示字符长度。

$.TipState function(校验组号) 来把该组的提示内容恢复到onshow状态

下载

最新版本：3.3，更新日期：2009/01/24[下载]

请实时关注插件的更新，请访问我的博客

其他相关作品

jQuery formValidator表单校验代码生成器ver1.1

摘要: jQuery formValidator表单校验插件，你只需要写一行代码就可以轻松实现20多种脚本控制，实现了js脚本于页面的分离。

jQuery formValidator表单校验代码生成器是针对jQuery formValidator表单校验插件ver2.4版本来写的。书写这个生成器的目的：

1、减少书写错误。主要是配置参数容易书写错误，JS是认大小写。

2、提高代码复用性。

3、让不懂JS的人更容易上手。

4、不用记忆配置参数。

最新版本：1.1，更新日期：2008/04/06 [下载] 插件更新网址，请点击这里

jQuery DateTimeMask日期掩码插件

摘要: jQuery DateTimeMask日期掩码插件，它是基于jQuery类库，实现了js脚本于页面的分离。

你只要写一句话:$("#input_id").DateTimeMask()，就能完美的实现5种日期掩码的输入控制,目前在ie6.0和firefox3.0下调试通过。该插件提供了回调函数，你可以利用它轻松的封装成服务器端控件，你可以把插件的属性变成服务器端属性。支持的掩码格式有:1:yyyy-MM-dd HH:mm:ss 2:yyyy-MM-dd HH:mm

3:yyyy-MM-dd 4:HH:mm 5:HH:mm:ss

最新版本：1.0，更新日期：2008/02/10 [下载] 插件更新网址，请点击这里

jQuery inputMask字母数字下划线掩码插件

摘要: jQuery inputMask掩码插件，它是基于jQuery类库，实现了js脚本于页面的分离，是一个很简单的掩码控制插件（简单的不敢拿出来），实现对字母、数字、下划线三种类型的输入控制，你可以任意组合。这个插件的应用场合，主要是：1、用户名的输入；2、配合autoComplete做输入控制（你可能根据拼音或者五笔来查找数据）；3、一些常规的数据输入。目前该插件在ie6.0和firefox3.0下调试通过。

最新版本：1.0，更新日期：2008/02/27 [下载] 插件更新网址，请点击这里