jqueryValidate使用详解 ----谷营中西软件科技园

使用步骤：

1. jQuery.validate插件的作用

jquery.validate是jquery旗下的一个验证框架，借助jquery的优势，我们可以迅速验证一些常见的输入，还可以自己扩充自己的验证方法，并且对国际化也有很好的支持。

2. HelloWorld 例子

说明：需要JQuery版本：1.2.6+
步骤：
1， 导入的jQuery.js与jquery.validate.js等文件，注意顺序不要颠倒

<script type="text/javascript" src="jquery.js">
<script type="text/javascript" src="jquery.metadata.js">
<script type="text/javascript" src="jquery.validate.js">

2， 指定哪个（或哪些）表单要在提交前先进行验证

<script type="text/javascript"> $(function(){ $("#testForm").validate(); }); </script>

3， 指定每个字段的验证规则

名称 *<input type="text" name="loginName" class="required">
其中class="required" 表示本字段必须要填写。

效果如下图：

jQuery的常用基础知识

1. 指定验证规则的方式

1.1. 把验证规则写到字段元素的class属性中

eg：

用户名：<input type="password" name="password" class="required">
电子邮件：<input type="text" name="email" class="required email">
密码：<input type="password" name="password" id="password1"
class="{required: true, minlength: 3}">
再次输入密码：<input type="password" name="password2" 
class="{equalTo:'[#password1]'} required">

以上用了两种方式：
1， 指定多个class名称（验证规则），多个class名称之间用空格隔开，如：

class="required email"。

2， 使用JSON对象，指定多个属性，如：class="{required: true, minlength: 3}"。
可以为某验证规则指定所用的参数，如minlength规则需要指定最小长度，这里为3。
3， 混合使用，如：class="{equalTo:'[#password1]'} required"。
说明：
1， 如果使用第2种方式（JSON对象），就必须引入：jquery.metadata.js，作用是解析JSON对象。
2， 如果表单字段的name不能重复，则只有最前面的配置起作用。

1.2. 调用validate()方法时指定验证规则

$(function() {
    $("#testForm").validate({
        rules: {
            loginName:{ required: true, minlength: 2},
            password: { required: true },
            password2: { equalTo: "#password1" }
        }
    });
});

2. 可以使用哪些验证规则（内置的验证规则）

required:true   必填字段
remote:"/checkName.do"              使用ajax方式访问”/checkName.do”，通过返回true或false表示输入值通过或未通过验证
email:true  必须输入正确格式的电子邮件
url:true    必须输入正确格式的网址
date:true   必须输入正确格式的日期
dateISO:true    必须输入正确格式的日期(ISO)，例如：2010-01-01，2010/01/01 只验证格式，不验证有效性
number:true 必须输入合法的数字(负数，小数)
digits:true 必须输入整数
creditcard:     必须输入合法的信用卡号
equalTo:"expr"  输入值必须和$(“expr”).val()的值相同，
expr例子：#fieldId
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 

说明：
1， remote是远程验证。比如注册验证用户名是否已被注册，返回值只能是true（验证成功）或false（验证失败）。在访问指定的url时，会自动把当前字段的值做为参数传递过去（以字段的name值为key，value为参数值）。
2， 例如使用remote验证用户名是否存在，当添加一个用户后，在当前窗口中（同一个窗口），再次添加一个同名的用户，validate不能提示该用户已存在，这是因为缓存的原因，jquery仍认为该用户名可用。解决方法是在页面中添加如下代码：

 $().ready(function(){
        $.ajaxSetup ({
                cache: false //关闭ajax相应的缓存
         });
     });

3， 某些属性值中的引号不能省略，否则出错。如accept、equalTo等，因为这时他需要的是一个字符串

3. 有关错误提示消息

3.1. 更改默认的错误提示消息

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} 的值")
});

3.2. 仅对当前表单改变提示消息

方法一：在class中指定某验证规则的错误消息

<input type="file" name="parResource" 
class="{ required: true, accept: 'zip', messages: {required: '请选择文件', accept:'请选择正确的文件'} }">    （提示：使用时不能换行）

方法二：在调用validate()方法时指定某验证规则的错误消息

$(function() {
    $("#myForm").validate({
        messages:{
            username:{ required: "请填写用户名" }, 
            email: { required: '请填写email', email: "请填与正确的email"}
        }
    });
});

3.3. 设置错误消息的显示样式

指定label.error的样式就可以了，如下：

<style type="text/css"> label.error{ margin-left: 10px; color: red; } </style>

说明：label.error指class为error的label元素，如：

4.自定义验证规则

4.1. 自定义验证规则

除了内置的验证规则，validation还允许自定义验证规则。这是通过validation的addMethod()方法实现的，语法 为：

jQuery.validator.addMethod("name",function,message)

其中:
1， name为验证规则的名称
2， function定义验证的规则。参数有?。返回值为?。
3， message是验证失败时的提示信息。

4.2. 让错误提示信息显示到指定的位置

$(function(){
    $("form").validate({wrapper: 'div'});
});