jQuery.validate 使用详解

jQuery.validate 是一款用于前端表单验证的插件，与 jQuery 库配合使用，使用简单，功能强大。本文将详细讲解如何使用 jQuery.validate 插件。

引入 jQuery.validate

在使用 jQuery.validate 前，需要先引入 jQuery 库和 jQuery.validate 插件。可以通过以下两种方式进行引入:

通过 CDN 引入：

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

通过本地文件引入：

<script src="./jquery.min.js"></script>
<script src="./jquery.validate.min.js"></script>

基本使用

在引入 jQuery 和 jQuery.validate 后，通过以下方法对表单进行验证：

$("form").validate({
  rules: {
    name: "required",
    email: {
      required: true,
      email: true
    }
  },
  messages: {
    name: "请输入您的姓名",
    email: "请输入正确的电子邮件地址"
  }
});

在上述代码中，rules 表示各字段的验证规则，messages 表示未通过验证时的提示信息。name 字段需要输入内容，email 字段需要输入正确的电子邮件地址。

使用时需要给需要验证的表单加上 name 属性，如果使用 id 或 class 获取表单，需要在其前加上 # 或 .，例如 #name 或 .email。

常用验证规则

必填字段

在表单中设置 required: true 即可验证该字段是否为空。

name: "required"

邮箱格式

在表单中设置 email: true 即可验证该字段是否为邮箱格式。

email: {
  required: true,
  email: true
}

手机号码

在表单中设置 mobile: true 即可验证该字段是否为手机号码格式。

mobile: {
  required: true,
  mobile: true
}

数字范围

在表单中设置 range: [min, max] 即可验证该字段是否为指定数字范围内。

age: {
  required: true,
  range: [18, 60]
}

数字最小值

在表单中设置 min: value 即可验证该字段是否大于等于指定数字。

age: {
  required: true,
  min: 18
}

数字最大值

在表单中设置 max: value 即可验证该字段是否小于等于指定数字。

age: {
  required: true,
  max: 60
}

自定义验证规则

在 jQuery.validate 中，可以通过 addMethod 方法添加自定义验证规则。

例如我们现在需要验证用户名是否由字母和数字组成，长度为 6-12 个字符：

$.validator.addMethod("username", function (value, element) {
  return this.optional(element) || /^[a-zA-Z0-9]{6,12}$/.test(value);
}, "用户名由 6-12 个字母或数字组成");

在上述代码中，addMethod 方法接收三个参数：验证规则名称、验证规则方法、未通过验证时的提示信息。

使用刚添加的验证规则：

username: {
  required: true,
  username: true
}

示例一：表单验证

现在我们将上述知识整合起来，制作一个简单的表单验证页面。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-validate/1.17.0/jquery.validate.min.js"></script>
    <title>表单验证</title>
  </head>
  <body>
    <form id="myForm">
      <label for="name">姓名：</label>
      <input type="text" name="name" id="name" /><br/><br/>
      <label for="age">年龄：</label>
      <input type="text" name="age" id="age" /><br/><br/>
      <label for="email">邮箱：</label>
      <input type="text" name="email" id="email" /><br/><br/>
      <label for="phone">电话：</label>
      <input type="text" name="phone" id="phone" /><br/><br/>
      <input type="submit" value="提交"/>
    </form>
    <script>
      $(function () {
        $("#myForm").validate({
          rules: {
            name: "required",
            age: {
              required: true,
              range: [18, 60]
            },
            email: {
              required: true,
              email: true
            },
            phone: {
              required: true,
              mobile: true
            }
          },
          messages: {
            name: "请输入您的姓名",
            age: {
              required: "请输入您的年龄",
              range: "请输入 18-60 之间的数字"
            },
            email: "请输入正确的电子邮件地址",
            phone: {
              required: "请输入您的电话号码",
              mobile: "请输入正确的手机号码"
            }
          }
        });
      });
    </script>
  </body>
</html>

在上述代码中，我们制作了一个包含姓名、年龄、电子邮箱和电话号码四个表单项的表单。通过 validate 方法指定了各字段的验证规则和提示信息。

示例二：插件扩展

除了使用自定义验证规则外，jQuery.validate 还可以通过插件扩展实现更多的验证功能。

例如我们现在需要使用与后端 API 进行数据验证，可以使用 additional-methods.js 插件扩展验证方法：

<script src="https://cdn.bootcss.com/jquery-validate/1.17.0/additional-methods.min.js"></script>

additional-methods.js 插件包含了许多扩展验证方法，例如验证 IP、URL、日期等，可以根据业务需求进行扩展。

在本文中，我们了解了如何使用 jQuery.validate 插件进行前端表单验证，并给出了两个示例进行说明。希望读者能够掌握 jQuery.validate 插件的使用，快速实现前端表单验证功能。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery.validate使用详解 - Python技术站

jquery.validate使用详解