更改电子邮件的文本字段边框颜色和验证@

Change textfield border colour and also validation @ for the email

本文关键字：颜色 验证 边框 字段 电子邮件 文本      更新时间：2023-09-26

下面是我的代码，它是一个客户端表单验证，只显示验证消息，但我希望它在显示验证消息时也将边框颜色更改为红色。我这样做了（输入#register-form{border:1px solid#ca4343；}），但没有工作。

此外，我在电子邮件中检查什么需要验证

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
  <script>
  // When the browser is ready...
  $(function() {
    // Setup form validation on the #register-form element
    $("#register-form").validate({
        // Specify the validation rules
        rules: {
            name: "required",
            gender: "required",
            address: "required",
            email: {
                required: true,
                email: true
            },
            username: "required",
            password: {
                required: true,
                minlength: 5
            }
        },
        // Specify the validation error messages
        messages: {
            name: "<br>Please enter your name",
            gender: "<br>Please specify your gender",
            address: "<br>Please enter your address",
            email: "<br>Please enter a valid email address",
            username: "<br>Please enter a valid username",
            password: {
                required: "<br>Please provide a password",
                minlength: "<br>Your password must be at least 5 characters long"
            }
        },
        submitHandler: function(form) {
            form.submit();
        }
    });
  });
  </script>
  <form action="./" method="post" id="register-form" novalidate="novalidate">
    <div class="label">Name</div><input type="text" id="name" name="name"  /><br />
    <div class="label">Gender</div><select id="gender" name="gender" />
                                      <option value="">Select One</option>
                                      <option value="Female">Female</option>
                                      <option value="Male">Male</option>
                                   </select><br />
    <div class="label">Address</div><input type="text" id="address" name="address"  /><br />
    <div class="label">Email</div><input type="text" id="email" name="email"  /><br />
    <div class="label">Username</div><input type="text" id="username" name="username"  /><br />
    <div class="label">Password</div><input type="password" id="password" name="password" /><br />
    <div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" /></div>
  </form>

这是一个表单，而不是一个输入。试试这个：

form#register-form {border:1px solid #ca4343;}

或者更可取的做法是，为无效形式指定一个类，例如"invalid"。然后你的CSS可以阅读：

form.invalid {border:1px solid #ca4343;}

仅呈现具有此边框的无效表单。

  <style>
    .error,#register-form
    {
        border: solid 1px #ca4343
    }
  </style>

validation-js添加新的类"error"您可以在这个类上应用css来显示边界

在css中创建一个新类：

input.error {
  border:1px solid #ca4343;
}

.error是jquery验证插件的默认错误类

OP增加了检查电子邮件地址中@的要求：

验证规则中的email: true行检查电子邮件地址是否为有效的电子邮件地址，并且从文档中显示为检查@

相关文章：