jQuery Validation – 选中复选框时检查输入值答案

【问题标题】：jQuery Validation – check input value when checkbox checkedjQuery Validation – 选中复选框时检查输入值
【发布时间】：2011-12-13 02:50:14
【问题描述】：

我有一个电话号码输入字段，其中包含 SMS 更新选项。我想检查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}" 
        }
      }
    });

【问题讨论】：

标签： jquery jquery-validate

【解决方案1】：

更新（来自您下面的评论）。

如果未输入 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 属性采用“依赖表达式”，用于确定是否需要移动字段（基于是否选中 #receive_sms_updates）。

这是一个例子： http://jsfiddle.net/andrewwhitaker/ED6cX/

为了更进一步，我建议从规则本身中删除“需要移动设备”方法（毕竟您想要一个可重复使用的正则表达式规则），并将其放在您的 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/

这样您就不会使用特定的表单来限制您的验证规则（它足够通用，可以应用于其他字段）。

【讨论】：

谢谢安德鲁。前三个规则现在仅在选中复选框时适用，并且表单可以提交为空。我仍然希望它默认需要一个 10 位数字，并且如果选中 #receive_sms_updates 则只需要一个以 04 开头的数字。
@AaronMoodie：啊，我明白了。在那种情况下，我认为您只是从自定义规则中遗漏了一行。请查看我的更新答案。