Jquery.validate表单验证

 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的样式就可以了，如下：

　　label.error{

　　　　margin-left: 10px;

　　　　color: red;

　　}

</style>

说明：label.error指class为error的label元素，如：<label for="resource" class="error">