jQuery验证 - 选中复选框时检查输入值

时间:2011-12-13 02:50:15

标签: jquery validation jquery-validate

我有一个电话号码的输入字段,可以选择短信更新。我想检查一下,当选中SMS复选框时,该号码是一个手机号码。我有正则表达式工作,这是验证,但即使没有选中复选框,也会显示“移动需求”错误。

$.validator.addMethod(
      "regex",
      function(value, element, regexp) {
        if($('#receive_sms_updates').is(':checked')) {
          var check = false;
          var re = new RegExp(regexp);
          return this.optional(element) || re.test(value);
        } 
      }, "Mobile Required"
    );


    $("form#patient-detials").validate({
      rules: {
        'patient[person_attributes][phone_mobile]': {
          maxlength: 10,
          minlength: 10,
          digits: true,
          regex: "^04[0-9]{8}" 
        }
      }
    });

1 个答案:

答案 0 :(得分:2)

更新(来自下方的评论)。

如果未输入if,则您不会从自定义规则返回true,从技术上会导致undefined返回给调用者(这是 falsey 价值)。按如下方式更新您的规则:

$.validator.addMethod("regex", function(value, element, regexp) {
    if ($('#receive_sms_updates').is(':checked')) {
        var check = false;
        var re = new RegExp(regexp);
        return this.optional(element) || re.test(value);
    }
    return true;
}, "Mobile Required");

离开这一部分因为它可能对其他人有用:

我会更新您的验证通话和规则,如下所示:

$.validator.addMethod("regex", function(value, element, regexp) {
    var re = new RegExp(regexp);
    return this.optional(element) || re.test(value);
}, "Mobile Required");

$("form#patient-detials").validate({
    rules: {
        'patient[person_attributes][phone_mobile]': {
            maxlength: 10,
            minlength: 10,
            digits: true,
            regex: "^04[0-9]{8}",
            required: "#receive_sms_updates:checked"
        }
    }
});

如您所见,required属性采用“dependency-expression”,用于确定是否需要移动字段(基于是否选中#receive_sms_updates)。

以下是一个例子: http://jsfiddle.net/andrewwhitaker/ED6cX/


为了更进一步,我建议从规则本身中删除“Mobile Required”方法(毕竟你想要一个可重用的regex规则),并将它放在messages属性上在你的验证电话上。类似的东西:

$.validator.addMethod("regex", function(value, element, regexp) {
    var re = new RegExp(regexp);
    return this.optional(element) || re.test(value);
});

$("form#patient-detials").validate({
    rules: {
        'patient[person_attributes][phone_mobile]': {
            maxlength: 10,
            minlength: 10,
            digits: true,
            regex: "^04[0-9]{8}",
            required: "#receive_sms_updates:checked"
        }
    },
    messages: {
        'patient[person_attributes][phone_mobile]': {
            required: "Mobile Required",
            regex: "Please enter a valid mobile number"
        }
    }
});

示例: http://jsfiddle.net/andrewwhitaker/5BVCK/

通过这种方式,您不会使用特定表单限制验证规则(通用性足以使其适用于其他字段)。