Question

是否可以使用jquery设置特定输入字段的颜色？

我想将边框设置为红色，如果它没有通过我写的一些验证，如果没问题就把它变回黑色。

有什么办法吗？

Answer 1

在验证码中

，设置错误

的字段

$('#afieldID').addClass("error");

验证码中的

，设置没有错误的字段

$('#afieldID').removeClass("error");

样式表代码

.error {
    border: solid 2px #FF0000;  
}

Answer 2

为什么人们总是想写自己的代码，他们认为自己是程序员; ^）你应该考虑validation plugin

我会做像

这样的事情

  $('#item_id').addClass('errorClass');

你可以添加把它全部放在类中并根据需要进行交换

Answer 3

最好的方法是执行验证并为每个未通过的元素添加一个类。这将保持形式和内容的清晰分离。

假设以下形式：

<form id="myAwesomeForm">
    <input type="text" id="A" name="A"/>
    <input type="text" id="B" name="B"/>
    <input type="text" id="C" name="C"/>
</form>

你可以添加一个“on-submit”处理程序，以这种方式验证数据（假设你已经在确定有效性的地方定义了一个函数isFieldValid）：

;(function ($) {

  // When the document is ready... 
  $(document).ready(function () {
    // ... put a "submit" trigger on the form that checks data.
    $("#myAwesomeForm").submit(function () {

      // Make a list of the input fields we care about.
      var fieldList = ['A', 'B', 'C'];
      var areAllFieldsValid = true;

      // Loop through the inputs we care about
      for(var i = 0; i < fieldList.length; i++) {

        // Test for validity based on some function you defined somewhere.
        if (!isFieldValid("#A")) {
          // Mark this field as having invalid-data (and anything else
          // you want to do here).
          $("#A").addClass("invalid-data");
          // Make a note that we hit a false field so we can abort the submit.
          areAllFieldsValid = false;
        }
      }

      // Return true/false depending on whether we got invalid
      // data.  If this is false, the submit will be aborted.
      return areAllFieldsValid;
    });
  });

})(jQuery);

然后你只需要在文件中定义一个CSS类：

/* My CSS file */
.invalid-data { border: 1px solid red; }

Jquery设置单独的输入边框颜色

3 个答案: