使用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中定义错误信息