在前端开发中，表单验证是一个常见的需求。为了实现表单的简单验证，我们可以使用 ValidatorJS 库，并且结合 webpack 构建工具使用 validatorjs-webpack-plugin 这个 npm 包来实现自动化验证表单的功能。
本篇教程将带你了解 validatorjs-webpack-plugin 的使用方法，并且介绍如何在 webpack 的构建流程中自动化验证表单。
安装
首先，你需要有一个 webpack 项目。如果你还没有，可以参考官方文档创建一个空的项目。
在项目中，你需要安装 validatorjs-webpack-plugin：
npm install validatorjs-webpack-plugin --save-dev
使用
配置
在 webpack.config.js 中添加以下代码：
const ValidatorJSWebpackPlugin = require('validatorjs-webpack-plugin');
module.exports = {
// ...
plugins: [
new ValidatorJSWebpackPlugin(options),
],
};其中，options 是配置对象，用来指定插件的行为。可以参考插件文档，最常用的配置项是 files 和 events。
验证规则
接下来，我们需要定义一组验证规则。可以用以下代码定义：
const rules = {
email: 'required|email',
password: 'required|min:6',
password_confirm: 'required|same:password',
};其中，规则的格式采用 validatorjs 的标准格式。内置的验证规则可以参考 validatorjs 的文档。
也可以通过自定义规则来实现更复杂的验证需求，例如：
ValidatorJS.register('foo', (val, req, attribute) => val === 'foo', 'The :attribute field must be foo.');上面的代码会在 validatorjs 中注册一个名为 foo 的验证规则，其表示检查一个值是否等于 foo。
表单验证
有了验证规则，我们现在就可以开始验证表单了。可以使用以下代码：
-- -------------------- ---- ------- ----- ----------- - ----------------------- ----- ---- - - ------ ------------------ --------- --------- ----------------- --------- -- ----- ---------- - --- ----------------- ------- -- -------------------- - --------------------------------------- - ---- - ----------------------- ---------- -
上面的代码创建了一个数据对象 data，然后将其与验证规则 rules 一起传递给 ValidatorJS 对象。最后，验证结果通过 fails() 等方法返回。
自动化验证
现在，我们已经了解了如何使用 ValidatorJS 验证表单。但是，在实际的前端项目中，几乎每个表单都需要验证，为什么不自动化这个过程呢？
这就是 validatorjs-webpack-plugin 的用武之地。该插件会在 webpack 构建过程中自动扫描所有的表单，并自动添加验证规则，最终生成一个 validator.js 文件。
要使用该插件，只需在 webpack.config.js 中添加以下配置：
-- -------------------- ---- -------
----- ------------------------ - --------------------------------------
-------------- - -
-- ---
-------- -
--- --------------------------
------- ----------
---
--
--通过设置 events 为 ['build']，我们让插件在构建期间自动验证表单，并生成验证文件。
示例代码
现在，让我们结合一个简单的表单示例，来演示 validatorjs-webpack-plugin 的使用。
我们的表单需要有三个字段：邮箱、密码和密码确认。我们需要确保邮箱是有效的电子邮件地址，并且密码和密码确认相同。
以下是实现该表单验证的示例代码：
-- -------------------- ---- -------
---- ---------- ---
------
-----
------------------
------ ------------ -------------
---- --------------------
------
-----
------------------
------ --------------- ----------------
---- --------------------
------
-----
--------------------
------ --------------- ------------------------
---- --------------------
------
------- -------------------------
-------
------- ----------------------------
--------
--------------------------------------------------------- -------- ------- -
-----------------------
----- ---- - -
------ -----------------
--------- --------------------
----------------- ----------------------------
--
----- ---------- - --- ----------------- -
------ -----------------
--------- -----------------
----------------- -------------------------
---
-- -------------------- -
----- ------ - ------------------------
---------------------------------- -- -
--------------------------------------------------------- - ----------------
---
- ---- -
----------------- -------------
-
---
----------- -------------------- ---- -------
-- -----------------
----- ------------------------ - --------------------------------------
----- ----------------- - -------------------------------
-------------- - -
------ -------------
------- -
--------- ------------
----- --------- - --------
--
-------- -
--- --------------------------
------ ---------------
------- ----------
---
--- -------------------
--------- -------------
---
--
-- ---
--总结
通过本文，你已经了解了 validatorjs-webpack-plugin 的使用方法，并且知道如何自动化验证表单。如果你想要深入了解 ValidatorJS，可以查看 validatorjs 的文档，里面包含了更多内置验证规则的介绍。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/validatorjs-webpack-plugin