jquery.validate.js 官网http://bassistance.de/jquery-plugins/jquery-plugin-validation/
在上面可以下载到它的例子程序和js脚本
说明:本人看了下例子程序,有什么不对的请大家指正。谢谢
使用它验证表单有2中方式:
1.使用它内部定义好的验证(也就是错误提示它已经定义好了。不需要我们再定义,这种方便,简单。但不灵活。)
2.自定义错误提示,这种可以自己定义错误提示。需要写的代码就相对较多了。
实例1、使用jquery验证定义好的错误提示。
一。我们先建一个表单,什么验证也没有的一个表单。
代码
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > jquery validate title >
head >
< body >
< form id ="commentForm" method ="get" action ="" >
< fieldset >
< legend > 请输入你的姓名,电子邮件和网址,以及你的评论 legend >
< p >
< label for ="cname" > 姓名(必填,并2个字符) label >
< input id ="cname" name ="name" />
< p >
< label for ="cemail" > 电子邮件 (必填) label >
< input id ="cemail" name ="email" />
p >
< p >
< label for ="curl" > 网址 (可选) label >
< input id ="curl" name ="url" value ="" />
p >
< p >
< label for ="ccomment" > 你的评论 (必填) label >
< textarea id ="ccomment" name ="comment" > textarea >
p >
< p >
< input type ="submit" value ="提交" />
p >
fieldset >
form >
body >
html >
2.添加验证
现在我们来添加验证。
1.引入jquery脚本
2.在表单上添加要验证的属性
< label for ="cname" > 姓名(必填,并2个字符) label >
< input id ="cname" name ="name" />
如:我们要验证姓名 必填和至少2个字符
只需要添加 class="required" minlength="2" 这2个属性表示什么意思就不说了。
< label for ="cname" > 姓名(必填,并2个字符) label >
< input id ="cname" name ="name" class ="required" minlength ="2" />
同理要验证其他文本框也只需要添加相应的属性就行了。
代码
< form class ="cmxform" id ="commentForm" method ="get" action ="" >
< fieldset >
< legend > 请输入你的姓名,电子邮件和网址,以及你的评论 legend >
< p >
< label for ="cname" > 姓名(必填,并2个字符) label >
< input id ="cname" name ="name" class ="required" minlength ="2" />
< p >
< label for ="cemail" > 电子邮件 (必填) label >
< input id ="cemail" name ="email" class ="required email" />
p >
< p >
< label for ="curl" > 网址 (可选) label >
< input id ="curl" name ="url" class ="url" value ="" />
p >
< p >
< label for ="ccomment" > 你的评论 (必填) label >
< textarea id ="ccomment" name ="comment" class ="required" > textarea >
p >
< p >
< input class ="submit" type ="submit" value ="提交" />
p >
fieldset >
form >
但这样还不行,因为这样只是把表单定义了属性,在js中并没有验证。还需要在js中添加一句代码。
$(FormName).validate(); 使用这个方法验证表单
< script type ="text/javascript" >
$.validator.setDefaults({
submitHandler: function () {
alert( " 已经提交! " );
}
});
$().ready( function () {
$( " #commentForm " ).validate();
});
script >
OK,一个表单验证搞定··
但还有点不完美,怎么定义错误信息的样式呢?我想让错误信息显示红色提示。
效果:
我们看到的是显示英文,下面我们来自定义错误提示。
其实自定义错误提示,就是重写$(formName).validate();这个方法
现在我们可以把表单上的验证属性去掉,在js中添加要验证的属性和错误提示。
完整代码如下:
代码
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > 试试 title >
< style type ="text/css" >
/* **** */
form.cmxform label.error, label.error {
color : red ;
font-style : italic ;
}
style >
head >
< script type ="text/javascript" src ="jquery-1.3.2.js" > script >
< script src ="jquery.validate.js" type ="text/javascript" > script >
< script type ="text/javascript" >
$.validator.setDefaults({
submitHandler: function () {
alert( " 已经提交! " );
}
});
$().ready( function () {
$( " #commentForm " ).validate({
rules: {
name: {
required: true ,
minlength: 2
},
email: {
required: true ,
email: true
}
},
messages: {
name: {
required: " 姓名必填 " ,
minlength: " 至少2个字符 "
},
email: " 请输入一个邮件地址 "
}
});
});
script >
< body >
< form class ="cmxform" id ="commentForm" method ="get" action ="" >
< fieldset >
< legend > 请输入你的姓名,电子邮件和网址,以及你的评论 legend >
< p >
< label for ="cname" > 姓名(必填,并2个字符) label >
< input id ="cname" name ="name" />
< p >
< label for ="cemail" > 电子邮件 (必填) label >
< input id ="email" name ="email" />
p >
< p >
< label for ="curl" > 网址 (可选) label >
< input id ="curl" name ="url" value ="" />
p >
< p >
< label for ="ccomment" > 你的评论 (必填) label >
< textarea id ="ccomment" name ="comment" > textarea >
p >
< p >
< input class ="submit" type ="submit" value ="提交" />
p >
fieldset >
form >
body >
html >
自定义错误提示后:
错误提示成了我们定于的提示了。
OK,完结······