jquery validate的rules方法使用注意

使用jq validate校验form时, 我们经常要用到切换一个input的rule功能, 比如:

此时我们就可以使用组件提供的rules方法: rules( "remove", rules ), rules( "add", rules )

<select name="contact_tel_code" id="contact_tel_code">
    <option value="1" data-rule_code="tel">+1</option>
    <option value="86" data-rule_code="cn_mobile" selected>+86</option>
</select>
<input type="text" name="contact_tel" id="contact_tel" class="has_del_icon" placeholder="请填写电话" title="联系电话" size="13" required data-rule-cn_mobile="true" />

js:

$('#contact_tel_code').change(function(){
    var rule_code = $(this).find("option:selected").attr('data-rule_code');
    $('#contact_tel').rules("remove");
    switch(rule_code){
        case 'tel':
            $("#contact_tel").rules("add", { required: true, tel:true, messages:{required:'美国电话必填',tel:'美国电话不正确'} });//
            break;
        case 'cn_mobile':
            $("#contact_tel").rules("add", { required: true, cn_mobile:true, messages:{required:'中国手机号必填',cn_mobile:'中国手机号不正确'} });//
            break;
    }
}

上面的html代码, 我们把rule写在了html中, 会导致rule切换失败, 这个很多blog中都没有提到, 官方文档不显眼的地方提到了:

意思就是: rules("remove") 方法只对js代码操作的 rule 绑定有效!

so, 我们要把前面的html代码修改为:

<select name="contact_tel_code" id="contact_tel_code">
    <option value="1" data-rule_code="tel">+1</option>
    <option value="86" data-rule_code="cn_mobile" selected>+86</option>
</select>
<input type="text" name="contact_tel" id="contact_tel" class="has_del_icon" placeholder="请填写电话" title="联系电话" size="13" />

remove操作的的第二个参数: 多个参数以空格连接, 比如: $( "#myinput" ).rules( "remove", "min max" );

案例中的tel, cn_mobile方法, 可以在 methods方法中补充, 并在messages中定义错误信息