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
>