javascript - 更改文本输入边框颜色

Question

我想制作一个表单，在发送之前使用 JavaScript 验证数据。当一个字段为空时，我想将其边框设置为红色。

HTML代码:

<label>Question: </label><input type = "text" maxlength = "100" name = "question"> <br />

JavaScript 代码 1:

fields[i].style.borderColor = "red";

JavaScript 代码 2:

fields[i].style.border = "1px solid red";

如果我使用 JS 代码 1，边框会改变颜色，但宽度会比以前大(即使我没有说任何关于边框宽度的信息)。如果我使用 JS 代码 2，文本输入会缩小 2px，变化很明显。

我应该怎么做才能只更改边框颜色？

Answer 1

实际上这是通过添加和删除类来首选的:

$("input").change(function()
  {
     var value = $(this).val();
     if(value=="")
     {
          $(this).addClass("red-border");
          $(this).focus();
     }else
     {
          $(this).removeClass("red-border");
     }
  });

还有你的 CSS:

.red-border{
    border: 1px solid red;
}