jquery - jQuery验证：不同消息的不同颜色？

Question

目前我能够为不同的 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>
...

标签： jqueryjquery-validate

Answer 1

Add the following:

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>';