validity

jQuery表单检验插件validity

作者：kevinG时间：2009-4-10

1不需要编写JavaScript代码，只要按手册约定给表单元素设置好相关属性，即可实现自动验证，如:

不能

为

空

"/>

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

2目前支持以下条件验证：

不能为空require电子邮件地址email

电话号码（支持分机号）phone

手机号码mobileurl地址url

身份证号码idCard

货币currency

正整数number

邮编zipIP地址ip

QQ号码（新版的QQ帐号可使用Email,建议使用正则自定义验证）qq

正负整数integer小数double

英文字母english纯汉字chine

用户名(数字及字母组合的字符串)urName

安全字符串（不能包含!#<>?*$+-=@%.*{}()|~^等字符的串）isSafe

输入长度限制（即输入长度必须在一定范围内）limit/limitB日期date

密码重复匹配repeat

整数或小数值必须在一定范围内闭幕式致辞 （比如年龄必须在18至60岁之间）range

数值比较（比如年龄必须大于18,但没有上限/至多购买100件等等，不能为0,必须为1等等，相当于只有一边范围的）compare

复选框必须选中m到n个group

下拉框必须选中compare/require

Ajax服务器端检验ajax自定义正则表达式custom

多条件组合验证require|limit

3兼容IE6/IE7/IE8/FireFox/Safari/Opera主流浏览器

如何使用

validity基本jquery扩展，所以，你得在你的web页面中加载jquery库及validity库，在与之间加入以下代码：

接下来，就是定义你的表单

不能为空

"/>

提交

"/>

然后，在这个表单后面加上验证语句:

这样，就实现了最基本的验证--不能为空。现在，当文本框失去焦点，或点击提交的时候，，如果值为空，则阻止提

交表单，很简单吧？

但要注意的是上面的文本框的属性中多了几项：require/datatype/msg本插件就是依靠这几个自定义的属性来

达到验证效果的，要达到验证，这三项是必须的

属性

require

datatype

msg

success

min

m老人与海读书笔记 ax

c田野作文 ompare

regexp

urlmsgid

值

true/fal

说明

指明表单项是否需要检验，设置为true证明表单项不能为空，且要符合datatype

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

datatype指定的规则。

非常多，不能全指定表单要符合的验证规则，多个规则可以组合起来，用竖线分隔如require|

列出email|limit

一个字符串指定检验失败时的提示信息组合验证时，用竖线分割

true/fal成功提示信息是否显示

范围下限具体含义与datatype的值有关

范围上限具体含义与datatype的值有关

比较表达式指定要比较的表达式当dat爱在细微处作文 atype值我与新时代 为compare时有效

正则表达式当datatype为custom时，指定验证的正则表达式

一个url地址ajax验证时，指定ajax请求的url地址

可指定method属性，指定ajax请求的方式(get或post)

显示提示信息的提示信息将会在此指定id的DOM元素中显示，而不会直接追加到表单元素的尾端

DOM元素的id

datatype属性

要实现强大的验证，完全取决于datatype属性的设置，下面详细列出目前支持的其属性与值。

datatype属性值

require

email

phone

mobile

url

idCard

curreny

number

zip

ipqq

integer

double

english

chine

urName

isSafelimit

说明

不能为空

必须是合法的电子邮件地址

必须是合法的固定电话号码（

必须为合法的手机号码

必须为url地址

合法的身份证号码

货币类型，等价于小数

正整数（包含

合法邮编

Ipqq

正负整数小数

英文字母纯汉字

用户名（字母及数字构成的字符串，

安全的字符串(不能包含!#<>?*$+-=@%.*{}()|~^等字符的串)

长度限定在指定的范围里，gbk编码下一个汉字视为两个字符，utf-8编码中，一个汉字视为3

limitB

daterepeat

rangecompare

group

compare/req

uirecustom

个

为了达到些规则的验证效果，你还应该为表单设置min及max属性，如

max="15"msg="

必须是

3

到

15

个字符"/>

这里的minmax指的是字符串的长度范围，而不是值的大小范围

一个汉字视为两个字符的检验，和limit规则类似，也需要指定min及max属性

日期格式(也可以指定format属性，即可日期格式)如

日期非法"/>

必须和指定的表单值一致，常常用来做密码确认，针对此检验，你必须设置表单项的to属性，其值

为要匹配的表单元素的name属性的值，如：

密码应该在

6

至

16

位之鼩鼱 间

"

to="pwd"/>

则说明

此项的值必须和name为"pwd"的元素的值一致

值必须在一定范围内，也应该设置minmax属性，但是min/max在里指的是值大小的范围，而不是

与limit的min/max的含义是不一样的

数值比较必须额外设置一个compare属性,指定要比较的表达式如

100"msg="

请输入大于

100

的数字

"

类似的，你还可以将compare端详的意思是什么 设置为"!=0",">=123","<=123","==123"

复感情经典语录 选框/单选框必须选中m-n个必须设置min属性，表示复选框必须至少选中m个，最多选中

n个,当然，对于单选框，min==max==1即可

max属性如果不指定，则不做"最多"限定

下拉框必须选中，也可以使用这两个值来限定

自定义正则检验当使用自定义正则时，你必须指定regexp属性，regexp为你指定的正则表达式,如

必须以

/

结束

">

ajax检验，必须指定url属性，即ajax请求的地址，如

那么，构造的最终请求URL为

"/?action=check&urname=XXX"

(其中XXX即文本框的值)

可指定method属性，指定ajax请求的方式(get或post)如method="post"

那么，如果约定ajax检验成功与否呢？

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

，则提示msg。否则直接显示服务器返回的信息。

ajax

组合验证

何为组合验证？组合验证即为普通验证规则的叠加，只有全部满足所有的各个规则，验证方可通过。如

用户名应该

在

3

到

8

位英文字母组合

|

必须为英文字母

|

用户名已经被占用"url="./"/>

上面的意思是：必须为3到8位，且为英文字母，并且要通过服务器ajax检验。注意，msg与datatype均用竖线

分隔，即表示了每个验证规则

失败后的相应的提示信息。那么，如果上面的msg="请使用其它用户名",那么无论何种验证失败，均提示“请使用

其它用户名”。

在实际情况中，请灵活运行组合验证，会达到意想不到的效果的！

msgid属性

msgid属性指定提示信息显示到指定id的DOM元素中去。如果不指定msgid，则会在表单项的后面追加显示信息。

验证成功与失败时的图示

要达到更好的提示图示，你应该定义以下几个ＣＳＳ类

.error-info验证失败后提示信息的样式

.error-Input验证失败后，表单项本身的样式

.suc-info验证成功后，提示信息的样式（往往是一个表示正确的图标）

方法：

$(document).checkForm();表单验证

$(document).Check_submit()

按

input

排列的顺序来显示错误信息适用于表单顶部显示错误信息

验证成功与失败时的图示代码修改

Line209:

jQuery("   ").html(errmsg).inrtAfter(element);Line218:

jQuery("   ").inrtAfter(element);Line243:

jQuery("   ").html(errmsg).inrtAfter(element);Line318:

jQuery("    ").inrtAfter(obj);

演示CSS

.form-info/*基本样式*/

background-image:url(../images/);background-repeat:no-repeat;

background-position:1000px1000px;

font-style:normal;line-height:25px;

padding:05px018px;

position:absolute;right:0;

width:160px;

.suc-info/*成功样式*/background-color:;

background-position:3px0;color:#3c8036;

.error-info/*错误样式*/background-color:#ffebe8;

background-position:3px-26px;

border:1px#dd3c10solid;color:#d90000;

.error-input/*错误input样式*/background-color:;

border:1px#dd3c10solid;

备注

图

片