jQuery验证：不同消息的不同颜色？答案

【问题标题】：jQuery validation: different colors for different messages?jQuery验证：不同消息的不同颜色？
【发布时间】：2021-03-02 01:03:57
【问题描述】：

目前我能够为不同的 jQuery 验证失败返回不同的消息。其工作代码如下所示。另外，我希望这些消息是不同的颜色，即“错误”消息为红色，“警告”消息为橙色。我该怎么做？

以下是针对不同错误显示不同消息的工作代码——我还希望这些消息以不同的颜色显示：

CSS

.error {
    color:red;
}

JavaScript

<script>
    $(function () {
        $("#inputForm").validate(
          {
              rules:
              {
                  appleQty:{min:0, max:100, range: [4, 8]},
                  bananaQty:{min:0, max:100, range: [2, 4]},
                  cherryQty:{min:0, max:100, range: [80, 85]}
              }
          });
    });
    jQuery.validator.messages.min = 'Error: Minimum value is {0}.';
    jQuery.validator.messages.max = 'Error: Maximum value is {0}.';
    jQuery.validator.messages.range = 'Warning: Expected range is {0} to {1}.';
</script>

HTML

...
<tr><td>Apples</td><td> <input type="text" id="appleQty" name="appleQty" > </td></tr>
<tr><td>Bananas</td><td> <input type="text" id="bananaQty" name="bananaQty" > </td></tr>
<tr><td>Cherries</td><td> <input type="text" id="cherryQty" name="cherryQty" > </td></tr>
...

【问题讨论】：

这个插件不是为这种类型的非二进制行为而设计的。有效或无效......没有“警告”之类的东西。下面第一个发布的答案可能是您将得到的最接近的答案。
@Sparky：仅按照设计的方式使用工具并不好玩！有关解决方案，请参阅下面接受的答案。
很高兴您终于找到了解决方法。如您所见，使用highlight 和unhighlight 的自定义回调是正确的方法。

标签： jquery jquery-validate

【解决方案1】：

添加以下内容：

CSS

.error {
    color:red;
}
.warning{
    color:orange;
}

Javascript

jQuery.validator.messages.min = '<span class="error">Error: Minimum value is {0}.</span>';
jQuery.validator.messages.max = '<span class="error">Error: Maximum value is {0}.</span>';
jQuery.validator.messages.range = '<span class="warning">Warning: Expected range is {0} to {1}.</span>';

【讨论】：

赞成，因为我很欣赏这种努力，而且大部分情况下它确实有效。（它改变了消息的颜色，但不改变输入字段中的文本。）也许我太强迫症了，但我仍然希望找到一个与jQuery合作而不是覆盖它的解决方案。
这就是幕后发生的事情：<label class="error" ...><input ... class="error" ...><span class="warning">Warning: ...</span></label>。 jQuery 为输入和消息元素设置class="error"，然后我们用我们自己的class="warning" 覆盖消息元素的类。如果可能的话，我想找到一种让 jQuery 对输入和消息使用警告类而不是错误类的方法。

【解决方案2】：

事后看来，解决方案很简单。困难的部分是找出在哪里可以找到当前错误消息的文本，以确定它是错误还是警告，以及如何准确地正确更新输入和消息类。

用于更新输入类的方法是标准的，在 highlight 选项中使用 addClass 和 removeClass。然而，这对消息类不起作用，因为它第一次运行时，消息元素尚未创建。相反，我们在创建消息元素之前更改了 errorClass 的值，因此随后使用所需的类创建消息元素。

警告：这对我有用。它可能不适合你。仅进行了基本测试。可能有错误。使用风险自负。

CSS

.error {
    color:red;
}

.warn {
    color:darkorange;
}

JavaScript

<!-- Define jquery validation methods for input fields -->
<script>
    $(function () {
        $("#inputForm").validate(
          {
              rules:
              {
                  appleQty:{min:0, max:100, range: [4, 8]},
                  bananaQty:{min:0, max:100, range: [2, 4]},
                  cherryQty:{min:0, max:100, range: [80, 85]}
              },

              highlight: function (element, errorClass, validClass) {
                  // Get message text for current error.
                  errorMessage = $("#inputForm").validate().errorList[0].message;
                  if (errorMessage.includes("Warning")) {
                      // Set input field class to "warn".
                      $(element).removeClass("error").addClass("warn");
                      // Set message class to "warn".
                      // Note: addClass/removeClass does not work here because the first time this runs
                      // the message element is not yet created.
                      this.settings.errorClass = "warn";
                  } else {
                      // Set input field class to "error"
                      $(element).removeClass("warn").addClass("error");
                      // Set message class to "error";
                      // Note: addClass/removeClass does not work here because the first time this runs
                      // the message element is not yet created.
                      this.settings.errorClass = "error";
                  }
              },
              unhighlight: function (element, errorClass, validClass) {
                  $(element).removeClass("error");
                  $(element).removeClass("warn");
              }
          });
    });
    // Order is significant. Conditions are evaluated from
    // most severe to least severe, with warning last.
    jQuery.validator.messages.number = 'Error: Input must be a number.';
    jQuery.validator.messages.min = 'Error: Minimum value is {0}.';
    jQuery.validator.messages.max = 'Error: Maximum value is {0}.';
    jQuery.validator.messages.range = 'Warning: Expected range is {0} to {1}.';
</script>

HTML

...
<tr><td>Apples</td><td> <input type="text" id="appleQty" name="appleQty" > </td></tr>
<tr><td>Bananas</td><td> <input type="text" id="bananaQty" name="bananaQty" > </td></tr>
<tr><td>Cherries</td><td> <input type="text" id="cherryQty" name="cherryQty" > </td></tr>
...

【讨论】：