jqueryvalidate的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="tr js:
$('#contact_tel_code').change(function(){
jquery官方文档下载
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中定义错误信息

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。