等大部分浏览器支持html5，页面不用修改，直接删除jquery插件就可以继续使用。
注意：1、本例使用的jquery插件是jquery.tools.min.js，最好使用包含jquery基础包的完整版本。
2、本例中的验证，在火狐，ie7、8、9，Safari中测试了，可以用。
3、表单提交使用Submit按钮
花了好久调试的，希望对看到的人有用。如果有错误，欢迎指正。
Jquery_Validator_Exampes
1、基础示例
效果图：
Html代码：
View Code
<
form
id
="from1"
>
<
table
width
="500"
border
="0"
cellpadding
="4"
cellspacing
="4"
>
<
tr
>
<
td
colspan
="2"
><
div
align
="center"
>
本例包含 A-E 的内容
</
div
></
td
>
</
tr
>
<
tr
>
<
td
width
="120"
>
name
</
td
>
<
td
><
input
type
="text"
name
="name"
placeholder
="name"
min
="5"
man
="50"
onFocus
="$(this).select()"
/></
td
>
</
tr
>
<
tr
>
<
td
>
email
</
td
>
<
td
><
input
type
="email"
required
="required"
name
="email"
/></
td
>
</
tr
>
<
tr
>
<
td
>
website
</
td
>
<
td
><
input
type
="url"
required
="required"
name
="url"
/></
td
>
</
tr
>
<
tr
>
<
td
>
age
</
td
>
<
td
><
input
type
="number"
name
="age"
pattern
="[0-9]"
data-message
="请输入0-9的数字"
/></
td
>
</
tr
>
<
tr
>
<
td
>
time
</
td
>
<
td
><
input
type
="time"
name
="time"
data-message
="Please fill in the correct time"
/></
td
>
</
tr
>
<
tr
>
<
td
>
Password
</
td
>
<
td
>
<
input
type
="password"
name
="password"
required
="required"
/></
td
>
</
tr
>
<
tr
>
<
td
>
Password check
</
td
>
<
td
><
input
type
="password"
name
="check"
data-equals
="password"
/></
td
>
</
tr
>
<
tr
>
<
td
>
Hobby
</
td
>
<
td
><
input
name
="Hobby"
type
="checkbox"
class
="checkbox"
id
="hoddy"
value
="01"
group
="mHobby"
>
sleep
</
input
><
br
/>
<
input
name
="Hobby"
type
="checkbox"
class
="checkbox"
id
="hoddy"
value
="02"
group
="mHobby"
>
Swimming
</
input
><
br
/>
<
input
name
="Hobby"
type
="checkbox"
class
="checkbox"
id
="hoddy"
value
="03"
group
="mHobby"
>
Run
</
input
>
</
td
>
</
tr
>
<
tr
>
<
td
>
Sex
</
td
>
<
td
><
input
name
="sex"
type
="radio"
class
="radio"
value
="0"
checked
>
Man
<
input
type
="radio"
name
="sex"
value
="1"
class
="radio"
>
Woman
</
td
>
</
tr
>
<
tr
>
<
td
>
Other
</
td
>
<
td
><
textarea
cols
="20"
rows
="5"
required
="required"
data-message
="Write something"
></
textarea
></
td
>
</
tr
>
<
tr
>
<
td
>
Country
</
td
>
<
td
><
select
name
="select"
required
="required"
>
<
option
selected value
="0"
>
请选择
</
option
>
<
option
value
="111"
>
中国
</
option
>
<
option
value
="222"
>
英国
</
option
>
<
option
value
="333"
>
美国
</
option
>
</
select
></
td
>
</
tr
>
<
tr
>
<
td
>
Area
</
td
>
<
td
><
select
name
="select2"
size
="5"
multiple required
="required"
>
<
option
value
="111"
>
北京
</
option
>
<
option
value
="222"
>
上海
</
option
>
<
option
value
="333"
>
广州
</
option
>
</
select
></
td
>
</
tr
>
<
tr
>
<
td
>
I accept the terms
</
td
>
<
td
><
input
type
="checkbox"
id
="accept"
required
="required"
class
="checkbox"
/></
td
>
</
tr
>
<
tr
>
<
td
></
td
>
<
td
><
input
type
="Submit"
class
="btn"
value
="Submit"
/></
td
>
</
tr
>
</
table
>
<
br
/>
</
form
>
A、常用html5增加的input类型包括：email、url、number、time.
B、常用html5增加的input属性包括：required（必填）、pattern（验证正则表达式）、data-message（错误提示）、min（最小长度）、max（最大长度）、data-equals（判断两个输入框值是否一致，常用于密码框的2次输入）
C、使用jquery验证：没有特殊样式需求，在表单后面调用下面的方法：
$("#from1").validator();
D、当input类型为time时，在支持html5的浏览器中，输入框自动识别输入格式，在不支持html5的浏览器中，使用以下代码：
$.tools.validator.fn("[type=time]", "Please supply a valid time", function(input, value) {
return /^\d\d:\d\d$/.test(value);
});$.tools.validator.fn()的三个参数分别是：input类型，错误提示，函数
E、当data-equals属性出现时，在支持html5的浏览器中，自动验证两个输入框值是否相等，在不支持html5的浏览器中，使用以下代码：
$.tools.validator.fn("[data-equals]", "Different value and $ 1", function(input) {
var name = input.attr("data-equals"),
field = this.getInputs().filter("[name=" + name + "]");
return input.val() == field.val() ? true : [name];
});$.tools.validator.fn()的参数中‘$1’代表 data-equals 的值
F、国家选项为菜单类型， 没有直接可以用的验证方法，使用以下代码：
$.tools.validator.fn("[name=select]", "Please select a value", function(input, value) {
if( value == "0"){
return false;
}else{
return true;
}
});再举个例子：验证id为name的文本框。
$.tools.validator.fn("[id=name]", "该品牌已存在", function(input, value) {
if(isBrandExists()){
return false;
}else if(isBrandHasRel()){
return false;
}else{
return true;
}
});isBrandExists()和isBrandHasRel()方法是含有业务逻辑的验证。
2、错误提示位置修改示例
效果图：
html代码：
View Code
<
form
id
="from2"
>
<
table
width
="500"
border
="0"
cellpadding
="10"
cellspacing
="10"
>
<
tr
>
<
td
colspan
="2"
><
div
align
="center"
>
本例包含 G 的内容
</
div
></
td
>
</
tr
>
<
tr
>
<
td
width
="90"
>
email
<
span
class
="star"
>
*
</
span
></
td
>
<
td
><
input
type
="email"
required
="required"
name
="email"
/></
td
>
</
tr
>
<
tr
>
<
td
>
website
<
span
class
="star"
>
*
</
span
></
td
>
<
td
><
input
type
="url"
required
="required"
name
="url"
/></
td
>
</
tr
>
<
tr
>
<
td
>
age
<
span
class
="star"
>
*
</
span
></
td
>
<
td
><
input
type
="number"
name
="age"
pattern
="[0-9]"
data-message
="Please fill in the correct number"
/></
td
>
</
tr
>
<
tr
>
<
td
>
I accept
<
span
class
="star"
>
*
</
span
></
td
>
<
td
><
input
type
="checkbox"
id
="accept"
required
="required"
class
="checkbox"
/></
td
>
</
tr
>
<
tr
>
<
td
></
td
>
<
td
><
input
type
="Submit"
class
="btn"
value
="Submit"
/></
td
>
</
tr
>
</
table
>
</
form
>
G、错误提示的位置可以不同，可以设置不同的提示框样式。使用以下代码：
$("#myform2").validator({
position: 'top left', //提示框出现的位置。一共有8个方位
offset: [-12, 0],//提示框的偏移量
message: '<div><em/></div>'//提示文字的容器，这里的<em/>是为了美观设置的箭头，一般使用<div></div>
})
用到的css样式如下：
.error
{
padding
:
4px 8px
;
border
:
1px solid #ffff99
;
height
:
16px
;
color
:
#336699
;
font-size
:
12px
;
display
:
none
;
background-color
:
#ffff99
;
vertical-align
:
middle
;
-moz-border-radius
:
4px
;
-webkit-border-radius
:
4px
;
-moz-border-radius-topleft
:
0
;
-moz-box-shadow
:
0 0 6px #ddd
;
-webkit-border-top-left-radius
:
0
;
-webkit-box-shadow
:
0 0 6px #ddd
;
-moz-border-radius-bottomleft
:
0
;
-webkit-border-bottom-left-radius
:
0
;
}
.error em
{
border-width
:
10px
;
border-style
:
solid
;
border-color
:
#ffff99 transparent transparent
;
width
:
0px
;
height
:
0px
;
bottom
:
-20px
;
display
:
block
;
position
:
absolute
;
}
3、错误框标红示例
效果图：
html代码：
View Code
<
form
id
="from3"
>
<
table
width
="500"
border
="0"
cellpadding
="10"
cellspacing
="10"
>
<
tr
>
<
td
colspan
="2"
><
div
align
="center"
>
本例包含 H 的内容
</
div
></
td
>
</
tr
>
<
tr
>
<
td
width
="80"
>
email
<
span
class
="star"
>
*
</
span
></
td
>
<
td
><
input
type
="email"
required
="required"
name
="email"
data-message
="请输入正确的电子邮件"
/></
td
>
</
tr
>
<
tr
>
<
td
>
website
<
span
class
="star"
>
*
</
span
></
td
>
<
td
><
input
type
="url"
required
="required"
name
="url"
data-message
="请输入正确的url"
/></
td
>
</
tr
>
<
tr
>
<
td
>
other
</
td
>
<
td
><
input
type
="text"
name
="text"
/></
td
>
</
tr
>
<
tr
>
<
td
></
td
>
<
td
><
input
type
="Submit"
class
="btn"
value
="Submit"
/></
td
>
</
tr
>
</
table
>
</
form
>
H、出现错误时，给输入框加上醒目的样式。使用以下代码：
$("#myform3").bind("onFail", function(e, errors) {
if (e.originalEvent.type == 'submit') {
$.each(errors, function() {
var input = this.input;
input.css({border: 'red 1px solid'}).focus(function() {//这里为输入错误的样式
input.css({borde: '#ccc 1px solid'});//这里为输入正确后的样式
});
});
}
});
4、仿服务器验证示例（含有业务逻辑的验证也可以这样写）
效果图，图1为验证成功，图2为验证失败
图1
图2
html代码：
View Code
<
form
id
="from4"
>
<
table
width
="500"
border
="0"
cellpadding
="10"
cellspacing
="10"
>
<
tr
>
<
td
colspan
="2"
><
div
align
="center"
>
本例包含 I 的内容
</
div
></
td
>
</
tr
>
<
tr
>
<
td
width
="80"
>
name
<
span
class
="star"
>
*
</
span
></
td
>
<
td
>
<
input
type
="text"
name
="name"
pattern
="[a-zA-Z ]{5,}"
id
="name2"
data-message
="请输入至少5位的英文名字"
/>
</
td
>
</
tr
>
<
tr
>
<
td
>
age
<
span
class
="star"
>
*
</
span
></
td
>
<
td
><
input
type
="number"
name
="age"
pattern
="^\d+[\.\d]?\d{0,2}$"
data-message
="请输入2位数字"
/></
td
>
</
tr
>
<
tr
>
<
td
></
td
>
<
td
><
input
type
="Submit"
class
="btn"
value
="Submit"
/></
td
>
<
td
></
td
>
</
tr
>
</
table
>
</
form
>
I、模拟后台验证。使用以下代码：
这是在前台基本验证通过以后再到服务器验证数据。
$("#from4").validator().submit(function(e) {
var form = $(this);
// 如果客户端验证通过
if (!e.isDefaultPrevented()) {
$.getJSON("js/server-fail.js", function(json){
// 服务器端验证通过，就跳转
if ($("#name2").val()=="qwert") {
form.load("success.html");
// 服务器端验证失败，使用json中的信息验证
} else {
form.data("validator").invalidate(json);
}
});
//禁止默认提交
e.preventDefault();
}
});