2023年6月21日发(作者：)

jQuery 表单检验插件 validity作者：kevin G 时间：2009-4-101 不需要编写 JavaScript 代码， 只要按手册约定给表单元素设置好相关属性，即可实现自动验证，如 :

如此，即可实现验证效果了，当文本框失败焦点 (onblur) 的时候，如果文本框为空，则会在其其后提示 “ 不能为空

” 。2 目前支持以下条件验证：不能为空 require电子邮件地址 email电话号码（支持分机号） phone手机号码 mobileurl 地址 url身份证号码 idCard货币 currency正整数 number邮编 zipIP 地址 ipQQ 号码（新版的 QQ 帐号可使用 Email, 建议使用正则自定义验证） qq正负整数 integer小数 double英文字母 english纯汉字 chinese用户名 ( 数字及字母组合的字符串 ) userName安全字符串（不能包含 ! # < > ? * $ + - =@ % . * { } ( ) | / ~ ^ 等字符的串） isSafe输入长度限制（即输入长度必须在一定范围内） limit / limitB日期 date密码重复匹配 repeat整数或小数值必须在一定范围内（比如年龄必须在 18 至 60 岁之间） range数值比较 （比如年龄必须大于 18, 但没有上限 / 至多购买 100 件等等，不能为 0, 必须为 1 等等，相当于只有一边范围的） compare复选框必须选中 m 到 n 个 group下拉框必须选中 compare/requireAjax 服务器端检验 ajax自定义正则表达式 custom多条件组合验证 require|limit3 兼容 IE6/IE7/IE8/FireFox/Safari/Opera 主流浏览器如何使用validity 基本 jquery 扩展，所以，你得在你的 web 页面中加载 jquery 库及 validity 库，在 与

之间加入以下代码：接下来，就是定义你的表单

然后，在这个表单后面加上验证语句 :这样，就实现了最基本的验证 -- 不能为空 。现在，当文本框失去焦点，或点击提交的时候，，如果值为空，则阻止提交表单，很简单吧？但要注意的是 上面的文本框的属性中多了几项： require / datatype / msg 本插件就是依靠这几个自定义的属性来达到验证效果的，要达到验证，这三项是必须的属性requiredatatypemsgsuccessminmaxcompareregexpurlmsgid值true/false说明指明表单项是否需要检验，设置为 true 证明表单项不能为空，且要符合 datatype

属性指定的 规则。设置为 false 说明表单项可为空，但是如果值非空，也要通过

datatype 指定的规则。非常多，不能全指定表单要符合的验证规则，多个规则可以组合起来，用竖线分隔 如 require|列出email|limit一个字符串指定检验失败时的提示信息 组合验证时，用竖线分割true/false成功提示信息是否显示范围下限具体含义与 datatype 的值有关范围上限具体含义与 datatype 的值有关比较表达式指定要比较的表达式 当 datatype 值为 compare 时有效正则表达式当 datatype 为 custom 时，指定验证的正则表达式一个 url 地址ajax 验证时，指定 ajax 请求的 url 地址可指定 method 属性，指定 ajax 请求的方式 (get 或 post)显示提示信息的 提示信息将会在此指定 id 的 DOM 元素中显示，而不会直接追加到表单元素的尾端DOM 元素的 iddatatype 属性要实现强大的验证，完全取决于 datatype 属性的设置，下面详细列出目前支持的其属性与值。datatype属性值requireemailphonemobileurlidCardcurrenynumberzipipqqintegerdoubleenglishchineseuserNameisSafelimit说明不能为空必须是合法的电子邮件地址必须是合法的固定电话号码（必须为合法的手机号码必须为 url 地址合法的身份证号码货币类型，等价于小数正整数（包含合法邮编Ipqq正负整数小数英文字母纯汉字用户名（字母及数字构成的字符串，安全的字符串 ( 不能包含 ! # < > ? * $ + - =@ % . * { } ( ) | / ~ ^ 等字符的串 )长度限定在指定的范围里， gbk 编码下一个汉字视为两个字符， utf-8 编码中，一个汉字视为 3 limitBdaterepeatrangecomparegroupcompare/requirecustom个为了达到些规则的验证效果，你还应该为表单设置 min 及 max 属性，如

这里的 min max 指的是字符串的长度范围，而不是值的大小范围一个汉字视为两个字符的检验，和 limit 规则类似，也需要指定 min 及 max 属性日期格式 ( 也可以指定 format 属性，即可日期格式 ) 如必须和指定的表单值一致，常常用来做密码确认，针对此检验，你必须设置表单项的 to 属性，其值为要匹配的表单元素的 name属性的值，如：

to="pwd"/> 则说明此项的值必须和 name 为 "pwd" 的元素的值一致值必须在一定范围内，也应该设置 min max 属性，但是 min/max 在里指的是值大小的范围，而不是与 limit 的 min/max 的含义是不一样的数值比较 必须额外设置一个 compare 属性 , 指定要比较的表达式 如=123", "<=123","==123"复选框 / 单选框必须选中 m-n 个 必须设置 min 属性，表示复选框必须至少选中 m 个，最多选中

n 个 , 当然，对于单选框，min==max==1 即可max 属性如果不指定，则不做 " 最多 " 限定下拉框必须选中，也可以使用这两个值来限定自定义正则检验 当使用自定义正则时，你必须指定 regexp 属性， regexp 为你指定的正则表达式 , 如ajax 检验， 必须指定 url 属性 ，即 ajax 请求的地址，如那么，构造的最终请求 URL 为

"/?action=check&username=XXX" ( 其中 XXX 即文本框的值

)可指定 method 属性，指定 ajax 请求的方式 (get 或 post) 如 method="post"那么，如果约定 ajax 检验成功与否呢？

如果服务器端返回字符串 " success" , 则证明检验成功，否则， ajax 检验失败, 如果设置了msg

，则提示msg 。否则直接显示服务器返回的信息。ajax组合验证何为组合验证？ 组合验证即为普通验证规则的叠加，只有全部满足所有的各个规则，验证方可通过。

如上面的意思是：必须为 3 到 8 位，且为英文字母，并且要通过服务器 ajax 检验。注意， msg 与 datatype 均用竖线分隔，即表示了每个验证规 则失败后的相应的提示信息。那么，如果上面的 msg=" 请使用其它用户名 ", 那么无论何种验证失败，均提示 “ 请使用其它用户名 ” 。在实际情况中，请灵活运行组合验证，会达到意想不到的效果的！msgid 属性msgid 属性指定 提示信息显示到指定 id 的 DOM 元素中去。如果不指定 msgid ，则会在表单项的后面追加显示信息。验证成功与失败时的图示要达到更好的提示图示，你应该定义以下几个ＣＳＳ类.error-info 验证失败后提示信息的样式.error-Input 验证失败后 ，表单项本身的样式.suc-info 验证成功后，提示信息的样式（往往是一个表示正确的图标）方法：$(document). checkForm();

表单验证$(document). Check_submit()

按input排列的顺序来显示错误信息 适用于表单顶部显示错误信息验证成功与失败时的图示代码修改Line 209:

jQuery("   ").html(errmsg).insertAfter(element);Line 218:jQuery("   ").insertAfter(element);Line 243:jQuery("   ").html(errmsg).insertAfter(element);Line 318:

jQuery("    ").insertAfter(obj);演示

CSS

.form-info /*基本样式*/background-image:url(../images/);

background-repeat:no-repeat;background-position:1000px 1000px;font-style:normal;line-height:25px;padding:0 5px 0 18px;position:absolute;right:0;width:160px;.suc-info /*成功样式*/background-color:;background-position:3px 0;color:#3c8036;.error-info /*错误样式*/background-color:#ffebe8;background-position:3px -26px;border:1px #dd3c10 solid;color:#d90000;.error-input /*错误input样式*/background-color:;

border:1px #dd3c10 solid;备注

图片

2023年6月21日发(作者：)

jQuery 表单检验插件 validity作者：kevin G 时间：2009-4-101 不需要编写 JavaScript 代码， 只要按手册约定给表单元素设置好相关属性，即可实现自动验证，如 :

如此，即可实现验证效果了，当文本框失败焦点 (onblur) 的时候，如果文本框为空，则会在其其后提示 “ 不能为空

” 。2 目前支持以下条件验证：不能为空 require电子邮件地址 email电话号码（支持分机号） phone手机号码 mobileurl 地址 url身份证号码 idCard货币 currency正整数 number邮编 zipIP 地址 ipQQ 号码（新版的 QQ 帐号可使用 Email, 建议使用正则自定义验证） qq正负整数 integer小数 double英文字母 english纯汉字 chinese用户名 ( 数字及字母组合的字符串 ) userName安全字符串（不能包含 ! # < > ? * $ + - =@ % . * { } ( ) | / ~ ^ 等字符的串） isSafe输入长度限制（即输入长度必须在一定范围内） limit / limitB日期 date密码重复匹配 repeat整数或小数值必须在一定范围内（比如年龄必须在 18 至 60 岁之间） range数值比较 （比如年龄必须大于 18, 但没有上限 / 至多购买 100 件等等，不能为 0, 必须为 1 等等，相当于只有一边范围的） compare复选框必须选中 m 到 n 个 group下拉框必须选中 compare/requireAjax 服务器端检验 ajax自定义正则表达式 custom多条件组合验证 require|limit3 兼容 IE6/IE7/IE8/FireFox/Safari/Opera 主流浏览器如何使用validity 基本 jquery 扩展，所以，你得在你的 web 页面中加载 jquery 库及 validity 库，在 与

之间加入以下代码：接下来，就是定义你的表单

然后，在这个表单后面加上验证语句 :这样，就实现了最基本的验证 -- 不能为空 。现在，当文本框失去焦点，或点击提交的时候，，如果值为空，则阻止提交表单，很简单吧？但要注意的是 上面的文本框的属性中多了几项： require / datatype / msg 本插件就是依靠这几个自定义的属性来达到验证效果的，要达到验证，这三项是必须的属性requiredatatypemsgsuccessminmaxcompareregexpurlmsgid值true/false说明指明表单项是否需要检验，设置为 true 证明表单项不能为空，且要符合 datatype

属性指定的 规则。设置为 false 说明表单项可为空，但是如果值非空，也要通过

datatype 指定的规则。非常多，不能全指定表单要符合的验证规则，多个规则可以组合起来，用竖线分隔 如 require|列出email|limit一个字符串指定检验失败时的提示信息 组合验证时，用竖线分割true/false成功提示信息是否显示范围下限具体含义与 datatype 的值有关范围上限具体含义与 datatype 的值有关比较表达式指定要比较的表达式 当 datatype 值为 compare 时有效正则表达式当 datatype 为 custom 时，指定验证的正则表达式一个 url 地址ajax 验证时，指定 ajax 请求的 url 地址可指定 method 属性，指定 ajax 请求的方式 (get 或 post)显示提示信息的 提示信息将会在此指定 id 的 DOM 元素中显示，而不会直接追加到表单元素的尾端DOM 元素的 iddatatype 属性要实现强大的验证，完全取决于 datatype 属性的设置，下面详细列出目前支持的其属性与值。datatype属性值requireemailphonemobileurlidCardcurrenynumberzipipqqintegerdoubleenglishchineseuserNameisSafelimit说明不能为空必须是合法的电子邮件地址必须是合法的固定电话号码（必须为合法的手机号码必须为 url 地址合法的身份证号码货币类型，等价于小数正整数（包含合法邮编Ipqq正负整数小数英文字母纯汉字用户名（字母及数字构成的字符串，安全的字符串 ( 不能包含 ! # < > ? * $ + - =@ % . * { } ( ) | / ~ ^ 等字符的串 )长度限定在指定的范围里， gbk 编码下一个汉字视为两个字符， utf-8 编码中，一个汉字视为 3 limitBdaterepeatrangecomparegroupcompare/requirecustom个为了达到些规则的验证效果，你还应该为表单设置 min 及 max 属性，如

这里的 min max 指的是字符串的长度范围，而不是值的大小范围一个汉字视为两个字符的检验，和 limit 规则类似，也需要指定 min 及 max 属性日期格式 ( 也可以指定 format 属性，即可日期格式 ) 如必须和指定的表单值一致，常常用来做密码确认，针对此检验，你必须设置表单项的 to 属性，其值为要匹配的表单元素的 name属性的值，如：

to="pwd"/> 则说明此项的值必须和 name 为 "pwd" 的元素的值一致值必须在一定范围内，也应该设置 min max 属性，但是 min/max 在里指的是值大小的范围，而不是与 limit 的 min/max 的含义是不一样的数值比较 必须额外设置一个 compare 属性 , 指定要比较的表达式 如=123", "<=123","==123"复选框 / 单选框必须选中 m-n 个 必须设置 min 属性，表示复选框必须至少选中 m 个，最多选中

n 个 , 当然，对于单选框，min==max==1 即可max 属性如果不指定，则不做 " 最多 " 限定下拉框必须选中，也可以使用这两个值来限定自定义正则检验 当使用自定义正则时，你必须指定 regexp 属性， regexp 为你指定的正则表达式 , 如ajax 检验， 必须指定 url 属性 ，即 ajax 请求的地址，如那么，构造的最终请求 URL 为

"/?action=check&username=XXX" ( 其中 XXX 即文本框的值

)可指定 method 属性，指定 ajax 请求的方式 (get 或 post) 如 method="post"那么，如果约定 ajax 检验成功与否呢？

如果服务器端返回字符串 " success" , 则证明检验成功，否则， ajax 检验失败, 如果设置了msg

，则提示msg 。否则直接显示服务器返回的信息。ajax组合验证何为组合验证？ 组合验证即为普通验证规则的叠加，只有全部满足所有的各个规则，验证方可通过。

如上面的意思是：必须为 3 到 8 位，且为英文字母，并且要通过服务器 ajax 检验。注意， msg 与 datatype 均用竖线分隔，即表示了每个验证规 则失败后的相应的提示信息。那么，如果上面的 msg=" 请使用其它用户名 ", 那么无论何种验证失败，均提示 “ 请使用其它用户名 ” 。在实际情况中，请灵活运行组合验证，会达到意想不到的效果的！msgid 属性msgid 属性指定 提示信息显示到指定 id 的 DOM 元素中去。如果不指定 msgid ，则会在表单项的后面追加显示信息。验证成功与失败时的图示要达到更好的提示图示，你应该定义以下几个ＣＳＳ类.error-info 验证失败后提示信息的样式.error-Input 验证失败后 ，表单项本身的样式.suc-info 验证成功后，提示信息的样式（往往是一个表示正确的图标）方法：$(document). checkForm();

表单验证$(document). Check_submit()

按input排列的顺序来显示错误信息 适用于表单顶部显示错误信息验证成功与失败时的图示代码修改Line 209:

jQuery("   ").html(errmsg).insertAfter(element);Line 218:jQuery("   ").insertAfter(element);Line 243:jQuery("   ").html(errmsg).insertAfter(element);Line 318:

jQuery("    ").insertAfter(obj);演示

CSS

.form-info /*基本样式*/background-image:url(../images/);

background-repeat:no-repeat;background-position:1000px 1000px;font-style:normal;line-height:25px;padding:0 5px 0 18px;position:absolute;right:0;width:160px;.suc-info /*成功样式*/background-color:;background-position:3px 0;color:#3c8036;.error-info /*错误样式*/background-color:#ffebe8;background-position:3px -26px;border:1px #dd3c10 solid;color:#d90000;.error-input /*错误input样式*/background-color:;

border:1px #dd3c10 solid;备注

图片