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

Posted 2023-05-09

【中文标题】关于 jQuery 验证的不同错误消息

【英文标题】：Different error message on jQuery validation

【发布时间】：2015-10-04 12:38:24

【问题描述】：

我正在使用 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'作为值输入时，要添加类有错误。

提前致谢

【参考方案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/

【讨论】：

当我键入 home 时没有任何反应

我做了，也许我的代码有任何冲突我不知道可能是什么问题，我整天都在寻找答案

还有一点，在上面的 JS 中，如果您还没有这样做，您需要重命名 'name' 以匹配输入字段的名称。

我没有改名字，我以为可能是错误，但我改了又试了，没有任何反应...

你能提供你的完整代码/html + javascript吗？

【参考方案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);

);

【讨论】：

以什么方式？您是否将“url-texbox-id”作为 id 添加到文本框？