JQuery
结合
Yav
验证
http://yav.sourceforge.net/en/oldnews.html
1、 在工程中加入jquery和yav的js文件
<
script
type
=
"text/javascript"
src
=
"yourPath/jquery1.2.6.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"yourPath/yav.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"yourPath/yav-config-zh-CN.js"
></
script
>
2、 在jsp页面中使用Jquery初始化yav验证
$(
function
()
{
yav.init(
'formName'
, rules);
}
);
这表示在
jsp
页面上的元素失去焦点的时候出发对应元素的验证
参数说明：
formName
：
form
表单的
name
属性名称
rules
：对应表单的验证规则
3、 在jsp页面添加表单的验证规则和提示信息以及错误信息
<
script
>
va
r rule
s=ne
w Array();
rules[0
]='username|required|
用户名不能为空
';
rules[1
]='password|require
d|
密码不能为空
';
rules[2
]='password|minlength|
8';
rules[3
]='confirm|equal|$passwor
d';
rules[4
]='email|required|e-mail
格式不
对
';
rules[5
]='email|emai
l';
yav.addHel
p('usernam
e'
, '
用户名输入格式描述
'
);
yav.addHel
p('passwor
d'
, '
密码的格
式
');
yav.addHel
p('confir
m'
, '
确认密码格
式
');
yav.addHel
p('emai
l'
, 'e-mai
l
格式
');
</
script
>
在步骤
2 yav.init
方法中传递的
rules
参数，就是这里定义的，他是一个数组，格式为：
‘
元素的
name
属性
|
规则
|
错误提示信息
’
，例如
rules[0
]='username|required|
用户名不能为空
';
标示
username
为必填项，如果为空则显示“
用户名不能为空
”错误提示
yav.addHel
p
方法是指在对应元素获得焦点的时候的提示信息（可选）
4、 在form表单提交前请调用方法
yav.performCheck(‘
表单名
’,
验证规则
,'inline')
例如：
yav.performCheck('exampleform', rules,'inline')
5、 在需要显示元素错误信息的地方使用如下语句
<
span
id
=
"errorsDiv_[
元素名称
]"/
>
例如：
<
span
id
=
"errorsDiv_username"/
>
，则会将
username
的错误信息显示在这个
span
中
6、 例子代码：，解压即可
7、 目前yav实现了如下验证规则
|
规则名称
|
语法
|
描述
|
应用范围
|
示例
|
|
alnumhyphen
|
元素名
|alnumhyphen|
错误信息
|
a-z, A-Z, 0-9 or -_
|
hidden, text, password, textarea
|
Username|alnumhyphen|
用户名只能包含字母、数字、
-
、
_
|
|
alnumhyphenat
|
元素名
|alnumhyphen|
错误信息
|
a-z, A-Z, 0-9 or -_@
|
hidden, text, password, textarea
|
Username|alnumhyphenat|
用户名只能包含字母、数字、
-
、
_
、
@
|
|
alphabetic
|
元素名
|alphabetic|
错误信息
|
a-z or A-Z
|
hidden, text, password, textarea
|
|
|
alphanumeric
|
元素名
|alphanumeric|
错误信息
|
a-z, A-Z or 0-9
|
hidden, text, password, textarea
|
|
|
alphaspace
|
元素名
|alphaspace|
错误信息
|
a-z, A-Z, 0-9, -_ or Space
|
|
|
|
and
|
索引
|and|
其他索引编号
|
错误信息
|
|
|
1|and|2-3|(1 and 2 and 3) not validated.
|
|
custom
|
元素名
|custom|
函数名称
|
使用自定义的
js
函数验证
|
|
|
|
date
|
元素名
|date|
错误信息
|
验证日期
|
hidden, text, password, textarea
|
|
|
date_le
|
元素名
|date_le|dateValue|
错误信息
|
日期比较
|
|
formerDate|date_le|01-01-2000
formerDate|date_le|$latterDate:Latter date
|
|
date_lt
|
元素名
|date_lt|dateValue|
错误信息
|
日期比较
|
hidden, text, password, textarea
|
formerDate|date_lt|01-01-2000
formerDate|date_lt|$latterDate:Latter date
|
|
double
|
元素名
|double|
错误信息
|
十进制数
|
hidden, text, password, textarea
|
|
|
email
|
元素名
|email|
错误信息
|
email
|
hidden, text, password, textarea
|
|
|
empty
|
元素名
|empty|
错误信息
|
为空判断
|
hidden, text, password, textarea
|
|
|
equal
|
元素名
|equal|textValue|
错误信息
|
比较
|
|
|
|
implies
|
index of precondition|implies|index of
postcondition|msg
|
|
|
|
|
integer
|
元素名
|integer|
错误信息
|
整数
|
hidden, text, password, textarea
|
|
|
keypress
|
元素名
|keypress|
允许的自字符
|
只允许输入预先定义的字符
|
hidden, text, password, textarea
|
|
|
mask
|
元素名
|mask|maskName
|
嵌入规则
|
hidden, text, password, textarea
|
|
|
maxlength
|
元素名
|maxlength|
错误信息
|
最大长度
|
hidden, text, password, textarea
|
|
|
minlength
|
元素名
|minlength|
错误信息
|
最小长度
|
hidden, text, password, textarea
|
|
|
notequal
|
元素名
|notequal|textValue|
错误信息
|
不等于
|
hidden, text, password, textarea, checkbox,
select, radio
|
|
|
numeric
|
元素名
|numeric|
错误信息
|
数字
|
hidden, text, password, textarea
|
|
|
numrange
|
元素名
|numrange|
最小值
-
最大值
|
错误信息
|
数字范围
|
hidden, text, password, textarea
|
|
|
or
|
元素名
|alnumhyphen|
错误信息
|
|
|
|
|
post-condition
|
|
|
|
|
|
pre-condition
|
|
|
|
|
|
regexp
|
元素名
|regexp|regexpValue|
错误信息
|
正则表达式
|
hidden, text, password, textarea
|
|
|
required
|
元素名
|required|
错误信息
|
必填项
|
hidden, text, password, textarea, checkbox,
select, radio
|
|
<!
DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"
>
<
html
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=UTF-8"
>
<
title
>
Insert title here
</
title
>
<
link
rel
="stylesheet"
type
="text/css"
href
="styles/yav-style.css"
>
<
script
type
="text/javascript"
src
="./js/jquery1.2.6.js"
></
script
>
<
script
type
="text/javascript"
src
="./js/yav.js"
></
script
>
<
script
type
="text/javascript"
src
="./js/yav-config-zh-CN.js"
></
script
>
<
script
>
$(
function
(){
yav.init('exampleform', rules);
});
function
haha(){
//
alert("haha");
}
var
rules
=
new
Array();
rules[
0
]
=
'username
|
required
|
用户名不能为空';
rules[
1
]
=
'password
|
required';
rules[
2
]
=
'password
|
minlength
|
8
';
rules[
3
]
=
'confirm
|
equal
|
$password';
rules[
4
]
=
'email
|
required
|
e
-
mail 格式不对';
rules[
5
]
=
'email
|
email';
rules[
6
]
=
'username
|
custom
|
haha()'
yav.addHelp('username', '用户名输入格式描述');
yav.addHelp('password', '密码的格式');
yav.addHelp('confirm', '确认密码格式');
yav.addHelp('email', 'e
-
mail格式');
</
script
>
</
head
>
<
body
>
<
form
onsubmit
="return yav.performCheck('exampleform', rules,'inline')"
name
="exampleform"
>
<
table
valign
="top"
>
<
tbody
>
<
tr
>
<
td
class
=""
>
Username:
</
td
>
<
td
>
<
input
type
="text"
class
="inputNormal"
name
="username"
title
="aaaaaaaaaaaa"
/>
<
span
id
="errorsDiv_username"
></
span
>
</
td
>
</
tr
>
<
tr
>
<
td
class
=""
>
Password:
</
td
>
<
td
>
<
input
type
="password"
class
="inputNormal"
name
="password"
/>
<
span
id
="errorsDiv_password"
/>
</
td
>
</
tr
>
<
tr
>
<
td
class
=""
>
Confirm Password:
</
td
>
<
td
>
<
input
type
="password"
class
="inputNormal"
name
="confirm"
/>
<
span
id
="errorsDiv_confirm"
/>
</
td
>
</
tr
>
<
tr
>
<
td
class
=""
>
E-mail:
</
td
>
<
td
>
<
input
type
="text"
class
="inputNormal"
name
="email"
/>
<
span
id
="errorsDiv_email"
/>
</
td
>
</
tr
>
<
tr
>
<
td
class
=""
>
</
td
>
<
td
/>
</
tr
>
<
tr
>
<
td
class
=""
>
<
input
type
="submit"
class
="buttonstyle"
value
="Check"
/><
br
/>
</
td
>
<
td
/>
</
tr
>
</
tbody
>
</
table
>
</
form
>
</
body
>
</
html
>