快速学习jQuery插件 jquery.validate.js表单验证插件使用方法

“快速学习jQuery插件 jquery.validate.js表单验证插件使用方法”攻略：

插件简介

jQuery是一个广泛使用的JavaScript库。jquery.validate.js是jQuery官方提供的一个表单验证插件，可以用来验证表单中的输入是否符合预期的条件。

插件安装

可以使用CDN链接引入插件：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>

也可以下载该插件的源代码，然后将文件放在项目中。

使用方法

1. 在HTML表单中添加验证规则

<form id="myForm">
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name" required>
  <br>
  <label for="email">邮 箱:</label>
  <input type="email" id="email" name="email" required>
  <br>
  <label for="password">密 码:</label>
  <input type="password" id="password" name="password" minlength="6" required>
  <br>
  <input type="submit" value="提交">
</form>

在表单中添加 required 和 minlength 等属性，设置必填项和最小长度等验证规则。

1. 初始化验证插件

$(document).ready(function() {
  $("#myForm").validate();
});

使用 validate() 函数来初始化验证插件。

1. 设置提示信息

$(document).ready(function() {
  $("#myForm").validate({
    messages: {
      name: "请输入您的姓名",
      email: "请输入正确的邮箱地址",
      password: {
        required: "请输入密码",
        minlength: "密码长度不能小于6个字符"
      }
    }
  });
});

在初始化验证插件时，可以设置 messages 对象，为每个表单元素设置自定义提示信息。

示例说明

下面提供两个示例，分别是基本的表单验证和自定义验证规则。

示例一：基本的表单验证

<form id="registerForm">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username" minlength="5" required>
  <br>
  <label for="password">密码:</label>
  <input type="password" id="password" name="password" minlength="6" required>
  <br>
  <input type="submit" value="注册">
</form>

$(document).ready(function() {
  $("#registerForm").validate({
    messages: {
      username: {
        required: "请输入用户名",
        minlength: "用户名长度不能小于5个字符"
      },
      password: {
        required: "请输入密码",
        minlength: "密码长度不能小于6个字符"
      }
    }
  });
});

示例二：自定义验证规则

<form id="loginForm">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username" required>
  <br>
  <label for="password">密码:</label>
  <input type="password" id="password" name="password" required>
  <br>
  <input type="submit" value="登录">
</form>

$.validator.addMethod("passwordStrong", function(value, element) {
  return this.optional(element) || /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,}$/.test(value);
}, "密码必须包含大小写字母、数字，长度至少为8个字符");

$(document).ready(function() {
  $("#loginForm").validate({
    rules: {
      password: "passwordStrong"
    },
    messages: {
      username: "请输入用户名",
      password: {
        required: "请输入密码",
        passwordStrong: "密码必须包含大小写字母、数字，长度至少为8个字符"
      }
    }
  });
});

上面的代码中，我们定义了一个名为 passwordStrong 的自定义验证规则，用于验证密码是否包含大小写字母、数字，长度至少为8个字符。然后在调用 validate() 函数时，为 password 添加了这个自定义验证规则。