javascript - 如何使用 jQuery 为错误消息添加颜色

Question

在我的 jQuery 验证逻辑中，我有这个：

if (strippedPN.length !== 10) {
    $('#phoneNumber').after('<span color="red" id="errPhoneNumber">Phone number has to be 10 digits long.  </span>');
    proceed = false;
}

因为我希望该字段旁边显示的错误消息是红色的。它不起作用。怎么了？

css()注意：我之前尝试过使用，after()但它改变了字段内文本的颜色（如预期的那样，顺便说一句）。我也试过css()了after()，它也不起作用。也试过了addClass。

这是HTML：

<div>
  <label for="phoneNumber" class="label">Phone Number</label>
  <input name="phoneNumber" type="text" id="phoneNumber" size="13">
</div>

Answer 1

给它一个风格..

<style>
#errPhoneNumber {color:red; }
</style>

然后应用它...

if (strippedPN.length !== 10) {
$('#phoneNumber').after('<span id="errPhoneNumber">Phone number has to be 10 digits long.      </span>');
proceed = false;
}

或者，如果您想一般应用于多个跨度/错误消息......一个类更好。

<style>
 .error {color:red;}
</style>

    if (strippedPN.length !== 10) {
$('#phoneNumber').after('<span class="error" id="errPhoneNumber">Phone number has to be 10 digits long.      </span>');
proceed = false;
}

Answer 2

你的意思是两者之一：

弃用的字体标签

color是不推荐使用的标签的属性<font>（=不要使用它）。

<font color="red">blah...</font>

一个类属性

<span class="red_text">blah...</span>
<!-- Of course you need to define styles for ".red_text" -->