关于 jQuery 验证的不同错误消息

Question

我正在使用 jQuery 验证插件。

我有一个必需的 url 输入，当它为空时返回错误“此字段是必需的。”。

我想要的是当这个输入的值为'home'时，将错误更改为“已经有一个主页”。但仅当在输入字段中输入“家”时。

这是我的 jQuery 代码：

$("#edit_pages_form").validate({
    errorClass: "has-error",
    validClass: "has-success",
    highlight: function(element, errorClass, validClass) {
        $(element).closest("div")
            .addClass(errorClass)
            .removeClass(validClass);
    },
    unhighlight: function(element, errorClass, validClass) {
        $(element).closest("div")
            .removeClass(errorClass)
            .addClass(validClass);
    }
});

您可能会注意到我突出显示了输入字段，当为空时我添加 has-error 类，当不为空时我添加 has-success 类。

我想要的是当'home'作为值输入时，要添加类有错误。

提前致谢

Answer 1

您可以创建自定义验证方法：

<form class="cmxform" id="edit_pages_form" method="get" action="">
  <fieldset>
    <p>
      <label for="cname">Name</label>
      <input id="name" name="name" type="text" required>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>

$(document).ready(function() {

  jQuery.validator.addMethod("isHome", function(value, element) {
    if (value.length == 4) {
      return (value != "home");
    }
    return true;
  }, "There is already a homepage");

  $("#edit_pages_form").validate({
    rules: {
      name: {
        isHome: true
      }
    },
    errorClass: "has-error",
    validClass: "has-success",
    highlight: function(element, errorClass, validClass) {
      $(element).closest("div")
        .addClass(errorClass)
        .removeClass(validClass);
    },
    unhighlight: function(element, errorClass, validClass) {
      $(element).closest("div")
        .removeClass(errorClass)
        .addClass(validClass);
    }
  });


});

演示：http://jsfiddle.net/qtgahxss/1/

Answer 2

只需添加一个if语句来检查值是否为home？

$("#edit_pages_form").validate({
errorClass: "has-error",
validClass: "has-success",
has-error: "has-error",
highlight: function(element, errorClass, validClass) {
if($('#url-texbox-id').val() == "home"){
 $(element).closest("div")
        .addClass(has-error);
        .removeClass(validClass);
}
else{
    $(element).closest("div")
        .addClass(errorClass)
        .removeClass(validClass);
        }
},
unhighlight: function(element, errorClass, validClass) {
    $(element).closest("div")
        .removeClass(errorClass)
        .addClass(validClass);
}
});