jquery.validate

一、学习

1.启动

  $("#commentForm").validate();

2.设置全局默认

$.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
    }
});

3.设置错误信息的提示位置

// 为错误信息 设置位置
        errorPlacement: function(error, element) {  
            error.prependTo(element.parent());  
        },

// 在表格中可以设置一个所有提示信息的位置，有错误信息的时候显示，没有信息的时候隐藏
errorLabelContainer: $("form li.errorAll"),
//用div包裹每个错误提示
wrapper: "div",

// 验证通过后，可以给原来错误的提示修改为成功的提示
success: function(label) {
    // set   as text for IE
    label.addClass("valid").text("Ok!")
},

4.自定义重置和提交按钮

    $("#custom-reset").click(function() {
        form.resetForm();
    });
    $("#custom-submit").click(function() {
        form.submit();
    });

二、 注意点

1. h5中属性 required 可以触发 jQuery.validate 中的required 属性

2. jQuery.validate 屏蔽了 h5 验证。

3. jQuery.validate 有2种写法

如果两种验证相同的 ，则使用 validate中的验证规则和报错说明
如果两种验证不同，则会一起验证

4.如果 type=“email” 验证的时候，会优先使用 ，下图扩展的提示

如果 写成 type = “text” 验证的时候则会使用我们自定义的提示

5. 删除某个验证规则

$('#form').rules('remove', 'required'); 

去除不了写在元素内部的required 属性 、可以删除插件定义的required。
删除多个可以使用:

$('#form').rules('remove', 'required idCard1');

删除所有可以使用:

$('#form').rules('remove');

6.添加某个验证规则:

$('#form').rules('add', {email: true ,messages: {email: '提示信息'}});

7.去除required 的规则

8. 把验证的规则，写在class 也能触发 这个规则验证，且 用 ‘remove’无法删除。

9.用 ‘remove’去除 ‘required’的时候。有时候会直接去掉 必填选项，有时却不会。这个需要进一步测试检验。未找到结果

10. 忽略一些元素使其不验证

ignore: "#emailName,[name='1']",

11.remote 验证

 rules:{  
        'etp.userCode':{  
            remote: {  
                type: "post",  
                url: "/powerSD/sdplat/etp/userCodeExist.action",  
                data: {  
                    userCode: function() {  
                                        return $("#etp.userCode").val();  
                    }  
                },  
                dataType: "html",  
                dataFilter: function(data, type) {  
                    if (data == "true"){  
                        return true;  
                    }else{  
                        return false;  
                    }  
                }  
            }  
        }  
    },  
    messages:{  
        'etp.userCode':{  
            remote: "用户名已被占用"  
        }  
    }