如何使用不同的错误消息验证这两个字段？

Question

我有 2 个字段：名称查询和公司 ID。他们需要满足以下条件：

1. 当这两个字段中的一个有效，即不为空，并且显示“请填写...”消息时，可以提交表单
2. 这两个字段都在 key up 和 focus out 时进行验证
3. 对于公司 ID 字段，它使用正则表达式检查 key up 并聚焦，如果无效，则无法提交表单，并显示消息“Invalid company ID format”

这是我的解决方案：

var myForm = $("#myForm");

$.validator.addMethod("regx", function (value, element, regexpr) {
            return regexpr.test(value);
        }, function (params, element) {
            return "Invalid company ID format"
        });

myForm.validate({
  rules: {
    nameQuery: {
      require_from_group: [1, '.mygroup']
    },
    companyId: {
      require_from_group: [1, '.mygroup'],
      regx: /^$|^[A-Za-z][A-Za-z]\d\d\d\/\d\/\w\w\w\w+$/
    }
  },
  messages: {
    nameQuery: {
      required: "Please fill in name query"
    },
    companyId: {
      required: "Please fill in company ID"
    }
  },
  errorClass: "alert",
  onkeyup: function(element) {
    this.element(element);
  },
  onfocusout: function(element) {
    this.element(element);
  },
  highlight: function (element, errorClass) {
    $(element).addClass(errorClass);
  },
  submitHandler: function (form) {
    $("p").html('Form submitted')
  },
  invalidHandler: function (form) {
    $("p").empty();
  }
})

input.alert {
  border: 1px solid red;
}
label.alert {
  color: red;
}

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>

<form id="myForm" method="post">
  <label for="nameQuery">Name Query: </label>
  <input class="mygroup" id="nameQuery" name="nameQuery">
  </br>
  <label for="companyId">Company Id: </label>
  <input class="mygroup" id="companyId" name="companyId">
  </br>
  <input type="submit" value="Search">
  <p></p>
</form>

其他东西运行良好，但自定义消息为空时似乎不起作用，显示默认消息“请填写这些字段中的至少 1 个”。有什么建议吗？

Answer 1

"...默认消息“请填写这些字段中的至少 1 个”正在显示。有什么建议吗？"

它显示require_from_group 的默认消息，因为您尚未为此规则/方法定义任何自定义消息。

相反，您在 required 规则/方法上设置自定义消息，这是您甚至没有使用的规则。

规则/方法的自定义消息必须对应于该规则/方法的名称，在本例中称为require_from_group。

// messages object/option
messages: {  
    // name attribute of the field
    nameQuery: {
        // name of the rule/method being used
        require_from_group: "Please fill in name query"
    },
    companyId: {
        require_from_group: "Please fill in company ID"
    } ....

---

注意：在您的自定义方法中，您不需要函数来返回消息，除非您动态更改该消息。相反，您可以只指定一个字符串作为消息来代替函数。

$.validator.addMethod(
    // name
    "regx",
    // method
    function (value, element, regexpr) {
        return regexpr.test(value);
    },
    // message
    "Invalid company ID format"  // just the string in this case
);

此外，您甚至不需要为 Regex 编写自定义方法，因为 Additional Methods 文件已经包含一个名为 pattern 的规则，它将执行此操作。

....
companyId: {
    require_from_group: [1, '.mygroup'],
    pattern: '^$|^[A-Za-z][A-Za-z]\d\d\d\/\d\/\w\w\w\w+$'
....

最后，无论你用highlight做什么都应该用unhighlight反转。

....
unhighlight: function (element, errorClass) {
    $(element).removeClass(errorClass);
}, ....

您可能还需要考虑更新 jQuery Validate 的版本，因为此时 v1.12.0 已经超过五年（2014 年 4 月）。

---

演示：

var myForm = $("#myForm");

myForm.validate({
  rules: {
    nameQuery: {
      require_from_group: [1, '.mygroup']
    },
    companyId: {
      require_from_group: [1, '.mygroup'],
      pattern: '^$|^[A-Za-z][A-Za-z]\d\d\d\/\d\/\w\w\w\w+$'
    }
  },
  messages: {
    nameQuery: {
      require_from_group: "Please fill in name query"
    },
    companyId: {
      require_from_group: "Please fill in company ID",
      pattern: "Invalid company ID format"
    }
  },
  errorClass: "alert",
  onkeyup: function(element) {
    this.element(element);
  },
  onfocusout: function(element) {
    this.element(element);
  },
  highlight: function (element, errorClass) {
    $(element).addClass(errorClass);
  },
  unhighlight: function (element, errorClass) {
    $(element).removeClass(errorClass);
  },
  submitHandler: function (form) {
    $("p").html('Form submitted')
  },
  invalidHandler: function (form) {
    $("p").empty();
  }
})

input.alert {
  border: 1px solid red;
}
label.alert {
  color: red;
}

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.js"></script>

<form id="myForm" method="post">
  <label for="nameQuery">Name Query: </label>
  <input class="mygroup" id="nameQuery" name="nameQuery">
  </br>
  <label for="companyId">Company Id: </label>
  <input class="mygroup" id="companyId" name="companyId">
  </br>
  <input type="submit" value="Search">
  <p></p>
</form>