1 <html> 2 3 <head> 4 <script src="jquery-1.7.2.min.js" type="text/javascript"></script> 5 <script src="jquery.validate.js" type="text/javascript"></script> 6 </head> 7 8 <body> 9 10 <form id="demo_form" action="#"> 11 <table style="border:1px red solid"> 12 <tr style="border:1px red solid"> 13 <td style="border:1px red solid"> 14 姓名 15 </td> 16 <td style="border:1px red solid"> 17 <input type="text" name="username" > 18 </td> 19 <td style="border:1px red solid"> 20 <span></span> 21 </td> 22 </tr> 23 <tr style="border:1px red soild"> 24 <td style="border:1px red solid"> 25 年龄 26 </td> 27 <td style="border:1px red solid"> 28 <input type="text" name="age" > 29 </td> 30 <td style="border:1px red solid"> 31 <span></span> 32 </td> 33 </tr> 34 <tr style="border:1px red solid"> 35 <td style="border:1px red solid" colspan="2"> 36 <input type="button" name="submit_btn" value="提交" > 37 </td> 38 </tr> 39 </table> 40 <form> 41 42 </body> 43 44 <script> 45 46 //定义验证规则 47 $("#demo_form").validate({ 48 focusCleanup:true, 49 onkeyup:false, 50 errorPlacement: function(error, element) { 51 //showErrorMesssgeDiv(error,element); 52 $(element).parent('td').next('td').children('span').html(error[0]); 53 }, 54 rules:{ 55 username:{ 56 required:true, 57 minlength:3, 58 maxlength:10 59 }, 60 age:{ 61 required:true, 62 digits:true 63 } 64 }, 65 messages:{ 66 username:{ 67 required:"用户名必须填", 68 minlength:"用户名不能少于3个字符", 69 maxlength:"用户名不能大于10个字符" 70 }, 71 age:{ 72 required:"年龄必须填", 73 digits:"年龄必须为数字" 74 } 75 } 76 }); 77 78 $("input[name='submit_btn']").unbind("click").bind("click",function(){ 79 if ( $("#demo_form").valid() ) 80 { 81 alert("验证通过！！"); 82 } 83 }); 84 85 86 </script> 87 88 </html>
Jquery.validate 一些属性配置：
|
required:true |
必填字段 |
|
remote:"check.php" |
使用ajax方法调用check.php验证输入值 |
|
email:true |
必须输入正确格式的电子邮件 |
|
url:true |
必须输入正确格式的网址 |
|
date:true |
必须输入正确格式的日期 |
|
dateISO:true |
必须输入正确格式的日期(ISO)，例如：2010-01-01，2010/01/01 只验证格式，不验证有效性 |
|
number:true |
必须输入合法的数字(负数，小数) |
|
digits:true |
必须输入整数 |
|
creditcard: |
必须输入合法的信用卡号 |
|
equalTo:"#field" |
输入值必须和$(“#field”)相同 |
|
accept: "gif|png|jpg" |
输入拥有合法后缀名的字符串（上传文件的后缀），多个后缀之间用’|’隔开 |
|
maxlength:5 |
输入长度最多是5的字符串(汉字算一个字符) |
|
minlength:3 |
输入长度最小是3的字符串(汉字算一个字符) |
|
rangelength:[5,10] |
输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符) |
|
range:[5,10] |
输入值必须介于 5 和 10 之间 |
|
max:5 |
输入值不能大于5 |
|
min:10 |
输入值不能小于10 |
说明：
remote是远程验证：比如注册验证用户名是否已被注册，返回值只能是true（验证成功）或false（验证失败）。在访问指定的url时，会自动把当前字段的值做为参数（以字段name为key）传递过去。
某些属性值中的引号不能省略，否则出错。如accept、equalTo等。
remote使用时遇到的问题：添加用户时需要验证用户名是否存在，当添加上一个用户后，在不离开该页面的情况下，再次添加该用户名的用户，validate不能提示该用户已存在，因为缓存的原因，jquery仍认为该用户名可用。解决方法是在页面中添加：
$().ready(function(){
$.ajaxSetup ({
cache: false //关闭AJAX相应的缓存
}); // 关闭缓存功能
});
自定义验证规则
除了内置的验证规则，validation还允许自定义验证规则。这是通过validation的addMethod()方法实现的，语法 为：
jQuery.validator.addMethod("name",function,message)
其中:
name 为验证规则的名称
function 定义验证的规则。参数有?。返回值为?。
message 是验证失败时的提示信息。
//更改默认的提示内容 jQuery.extend(jQuery.validator.messages, { required: "必填字段", remote: "请指定一个不重复的值", email: "请输入正确格式的电子邮件", url: "请输入合法的网址", date: "请输入合法的日期", dateISO: "请输入合法的日期 (ISO).", number: "请输入合法的数字", digits: "只能输入整数", creditcard: "请输入合法的信用卡号", equalTo: "请再次输入相同的值", accept: "请输入拥有合法后缀名的字符串", maxlength: jQuery.validator.format("允许的最大长度为 {0} 个字符"), minlength: jQuery.validator.format("允许的最小长度为 {0} 个字符"), rangelength: jQuery.validator.format("允许的长度为{0}和{1}之间"), range: jQuery.validator.format("请输入介于 {0} 和 {1} 之间的值"), max: jQuery.validator.format("请输入一个最大为 {0} 的值"), min: jQuery.validator.format("请输入一个最小为 {0} 的值") });
改变错误消息显示样式
指定label.error的样式就可以了，如下：
<style type="text/css">
label.error{
margin-left: 10px;
color: red;
}
</style>
说明：label.error指class为error的label元素，如：<label for="resource" class="error">