javascript - 如何仅更改输入表单控件的错误消息颜色

Question

我正在尝试设计我的第一个网站。 我正在使用 Bootstrap 4 和 jquery 验证插件，我现在正在制作一个表单。我有两个问题: 首先，我只想更改输入下方错误消息的颜色，但我的样式更改了输入文本大小/颜色和错误消息文本大小/颜色，如何只更改输入下方的错误文本？

第二个问题是，根据有效与否，我在代码中的何处更改 Bootstrap 表单控件状态？

这是我到目前为止的代码:

$('document').ready(function(){

    $('#registration_form').validate({
        rules: {
            username: {
                required: true,
                maxlength: 10,
                minlength: 3
            },
            email: {
                required: true,
                email: true
            },
            email_con: {
                required: true,
                equalTo: "#email"
            },
            password: {
                required: true,
                minlength: 7
            },
            password_con: {
                required: true,
                equalTo: "#password"
            },
            formCheck: {
                required: true
            },
        }
    });
});

        .error{
          color: red;
          font-Size: 13px;
        }

                                <div class="form-row form-group">
                                    <div class="col-sm-4 col-xl-3 text-center d-xl-flex justify-content-xl-center align-items-xl-center label-column"><label class="col-form-label">Email* :</label></div>
                                    <div class="col-sm-6 input-column"><input class="form-control" type="email" name="email" id="email" placeholder="name@mail.com"></div>
                                </div>

Answer 1

如果您想更改错误文本消息的颜色，只需编写label.error{color: red;}并遵循下面的html结构。

$(document).ready(function(){
  $('#registration_form').validate({
    rules: {
      email: {
        required: true,
        email: true
      }
    }
  });
});

label.error{
  color: red;
  font-size: 13px;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>

<div class="container my-2">
  <div class="row">
    <form class="col-sm-12" action="#" id="registration_form">
      <div class="form-row form-group">
        <div class="col-sm-4 text-sm-right">
          <label class="col-form-label" for="email">Email* :</label>
        </div>
        <div class="col-sm-6">
          <input class="form-control" type="email" name="email" id="email" placeholder="name@mail.com">
        </div>
      </div>
      <div class="form-row form-group">
        <div class="col-sm-6 offset-sm-4">
          <button type="submit" class="btn btn-success">Submit</button>
        </div>
      </div>
    </form>
  </div>
</div>