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

Question

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

如果这 2 个字段中有 1 个有效，即不为空，并且显示 "Please fill in ..." 消息，则可以提交表单
这两个字段都在键上和焦点外验证
对于company Id字段，在key up和focus out时用正则表达式检查，如果无效，则无法提交表单，并显示消息"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>

其他东西运行良好，但空的自定义消息似乎不起作用，显示默认消息 "Please fill at least 1 of these fields"。有什么建议吗？

Answer 1

"... default messages "Please fill at least 1 of these fields" are showing. Any suggestions?"

显示 require_from_group 的默认消息，因为您尚未为此 rule/method 定义任何自定义消息。

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

rule/method 的自定义消息必须对应于 rule/method 的名称，在本例中称为 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"
    } ....

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

$.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 编写自定义方法，因为附加方法文件已经包含一个名为 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 的版本，因为此时 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>

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

How to validate these 2 fields with different error messages?

javascript

jquery

jquery-validate