jQuery Validate表单验证插件 添加class属性形式的校验

步骤

1. 首先在HTML页面中引入jQuery和jQuery Validate插件的js文件。

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-validate/1.19.3/jquery.validate.min.js"></script>

1. 在表单元素中添加class属性进行校验规则的配置，比如添加required表示该表单元素是必填项，添加email表示该表单元素必须是合法的email地址。

<form id="form">
  <div>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" class="required">
  </div>
  <div>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" class="required">
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" class="required email">
  </div>
  <button type="submit">Submit</button>
</form>

1. 编写jQuery Validate的配置代码，指定表单元素的校验规则和提示信息。

$(function() {
  $("#form").validate({
    rules: {
      username: "required",
      password: "required",
      email: {
        required: true,
        email: true
      }
    },
    messages: {
      username: "Please enter your username",
      password: "Please enter your password",
      email: {
        required: "Please enter your email",
        email: "Please enter a valid email address"
      }
    },
    errorPlacement: function(error, element) {
      error.appendTo(element.parent());
    }
  });
});

解释

1. 第一步是引入jQuery和jQuery Validate插件的js文件。这是必须的，因为使用jQuery Validate插件需要jQuery的支持。

2. 在表单元素中添加class属性来配置校验规则，这是使用jQuery Validate插件添加校验规则的主要方法之一。

3. 然后是通过jQuery编写配置代码，指定表单元素的校验规则和提示信息。这个过程中使用了rules和messages两个属性，分别用来指定校验规则和提示信息。除此之外，还指定了errorPlacement参数，指定了错误提示信息的位置。

示例

以下是两个简单的示例，展示了如何使用class属性形式的校验规则：

1. 验证表单输入是否为空

<form id="form">
  <div>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" class="required">
  </div>
  <div>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" class="required">
  </div>
  <button type="submit">Submit</button>
</form>

$(function() {
  $("#form").validate({
    rules: {
      username: "required",
      password: "required",
    },
    messages: {
      username: "Please enter your username",
      password: "Please enter your password",
    },
    errorPlacement: function(error, element) {
      error.appendTo(element.parent());
    }
  });
});

1. 验证表单输入是否为email格式

<form id="form">
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" class="required email">
  </div>
  <button type="submit">Submit</button>
</form>

$(function() {
  $("#form").validate({
    rules: {
      email: {
        required: true,
        email: true,
      }
    },
    messages: {
      email: {
        required: "Please enter your email",
        email: "Please enter a valid email address",
      }
    },
    errorPlacement: function(error, element) {
      error.appendTo(element.parent());
    }
  });
});

参考资料

1. jQuery Validate documentation: https://jqueryvalidation.org/

2. jQuery Validate GitHub repository: https://github.com/jquery-validation/jquery-validation

阅读剩余 64%