前言
在前端开发中，很多时候需要通过表单来收集用户输入信息。但是，用户输入的数据往往是不可靠的，所以需要在客户端对输入数据进行一些格式、长度、有效性等方面的校验，以确保数据的合法性，提高数据的准确性和安全性。
jquery-validation 是一个基于 jQuery 的表单验证插件，它可以帮助我们快速方便地实现表单校验功能。本篇文章将从以下几个方面介绍 jquery-validation 的使用方法：
- 安装 jquery-validation
- 引入 jquery-validation
- 简单示例
- 深入讲解
安装 jquery-validation
在使用 jquery-validation 之前，需要先安装它。可以通过 npm 安装：
npm install jquery-validation
引入 jquery-validation
安装完成后，我们需要在项目中引入 jquery-validation。可以通过以下两种方式引入：
方式一：使用 script 标签引入
在 HTML 文件中使用 script 标签引入：
<script src="path/to/jquery.js"></script> <script src="path/to/jquery.validate.js"></script>
方式二：使用模块化引入
在 JavaScript 代码中使用模块化引入：
import $ from 'jquery' import 'jquery-validation'
简单示例
接下来，让我们来看一个简单的示例：验证一个表单是否为空。
HTML 代码：
<form id="validate-form"> <label for="name">姓名：</label> <input type="text" id="name" name="name"> <br> <button type="submit">提交</button> </form>
JavaScript 代码：
-- -------------------- ---- -------
------------ -
------------------------------
-- ----
------ -
----- ----------
--
-- --------
--------- -
----- --------
-
---
---如上代码，我们使用了 validate 方法来对表单进行验证。validate 方法有两个参数：rules 和 messages。rules 用于配置验证规则，messages 用于配置错误提示信息。
在 rules 中，我们使用了一个简单的规则：name: 'required'，表示 name 表单元素必填。因此，如果用户没有填写名字，就会显示错误提示信息 "名字不能为空"。
深入讲解
除了简单的校验，jquery-validation 还支持更复杂的表单校验。接下来，让我们来深入讲解 jquery-validation 的使用方法。
配置规则
在使用 jquery-validation 进行表单校验时，我们需要配置一些校验规则。下面是常用的规则配置：
必填字段
$('#form').validate({
rules: {
name: 'required'
},
messages: {
name: '名字不能为空'
}
});在 rules 中使用 required 规则，表示该字段必填。
字符串长度限制
-- -------------------- ---- -------
---------------------
------ -
----- -
--------- -----
---------- --
---------- --
-
--
--------- -
----- -
--------- ---------
---------- -------
---------- ------
-
-
---在 rules 中使用 minlength 和 maxlength 规则，表示该字段的最小长度和最大长度。
数值大小限制
-- -------------------- ---- -------
---------------------
------ -
---- -
--------- -----
---- ---
---- --
-
--
--------- -
---- -
--------- ---------
---- ------------
---- ----------
-
-
---在 rules 中使用 min 和 max 规则，表示该字段的最小值和最大值。
正则匹配
-- -------------------- ---- -------
---------------------
------ -
------ -
--------- -----
------ ----
-
--
--------- -
------ -
--------- ---------
------ ---------
-
-
---在 rules 中使用 email 规则，表示该字段必须是正确的邮箱格式。
配置提示信息
在表单校验中，除了校验规则之外，还需要配置错误提示信息。下面是提示信息配置方法：
$('#form').validate({
rules: {
name: 'required'
},
messages: {
name: '名字不能为空'
}
});在 messages 中，使用与 rules 中相同的 key，表示该校验规则对应的错误提示信息。
自定义规则
有时，jquery-validation 自带的规则无法满足我们的需求，需要自定义规则。下面是一个示例代码：
-- -------------------- ---- -------
--------------------------------------- --------------- -------- ------- -
------ ------------- --- --------------
-- ------------
---------------------
------ -
--------------- -
--------- -----
--------------- - ------- - -
-
--
--------- -
--------------- -
--------- -----------
-
-
---在 jQuery 中，使用 $.validator.addMethod 方法添加自定义方法。在 rules 中使用自定义规则名，并传入相关参数（如此处传入的是 number: 6）。
常用 API
在 jquery-validation 中，有一些 API 可以帮助我们更好地进行表单校验。下面是一些示例代码：
valid()
valid() 方法用于校验一个单独的元素，如果校验通过，返回 true，否则返回 false。
$('#form').validate();
if ($('#email').valid()) {
// 校验通过
} else {
// 校验失败
}resetForm()
resetForm() 方法用于重置表单和校验状态。
$('#form').validate();
$('#form')[0].reset();
$('#form').validate().resetForm();showErrors()
showErrors() 方法用于手动展示表单校验错误信息。
-- -------------------- ---- -------
----------------------
---------------------------- -
-- -------------------- -
-- ---------
- ---- -
-- -----------
----------------------------------
------ -------------
--------- ----------
---
-
---总结
本文介绍了 jquery-validation 的安装方式、使用方法以及常用 API。在实际项目中，我们可以根据具体要求配置规则和提示信息，实现复杂的表单校验功能，提高表单数据的准确性和安全性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/164048