在 Vue.js 项目中，有时候需要对用户输入的数据进行验证。vue-auto-validator 是一个简单易用的验证插件，可以帮助开发人员快速实现数据验证功能。本文将介绍如何使用 vue-auto-validator 进行数据验证。
安装
vue-auto-validator 可以通过 npm 安装，使用以下命令：
npm i vue-auto-validator
使用
初始化
在使用 vue-auto-validator 之前，我们需要在 main.js 中引入并注册插件：
import Vue from 'vue'
import { Validator } from 'vue-auto-validator'
Vue.use(Validator)配置校验规则
我们可以在组件中使用 rules 属性配置校验规则，例如：
-- -------------------- ---- -------
----------
-----
------ ----------- ------------------ ------------------
-------- ------------- ---------
------
-----------
--------
------ ------- -
---- -- -
------ -
--------- ---
-
--
--------- -
------------- -- -
------ --------------------------------- -
------ -
- --------- ----- -------- --------- --
- ---- -- ---- --- -------- ------------- --
-
--
-
-
-
---------代码中，我们通过 rules 属性配置了用户名输入框的两条校验规则：
- required：必填
- min、max：长度限制为6-12位
触发校验
当用户输入完毕后，我们需要手动触发校验。我们可以使用 validate 方法：
-- -------------------- ---- -------
----------
-----
------ ----------- ------------------ ------------------
------- ---------------------------
------
-----------
--------
------ ------- -
---- -- -
------ -
--------- ---
-
--
-------- -
------ -- -
-- ---------------------------- -
-- -----------
-
-
-
-
---------代码中，我们通过 validate 方法触发校验，如果校验通过，就可以提交表单数据了。
自定义校验规则
vue-auto-validator 还支持自定义校验规则。我们可以通过 addRule 方法添加自定义校验规则：
-- -------------------- ---- ------- ------ --- ---- ----- ------ - --------- - ---- -------------------- ------------------ -------------------------- ------- -- - ----- ----- - -------------- ------ ----------------- -- -- ------- ------------------------------ - ------ -- ---------- -------- -------- ----------- -- --
代码中，我们通过 addRule 方法添加了一个名为 phone 的自定义校验规则。使用 custom 规则调用即可。
总结
vue-auto-validator 是一个方便易用的数据验证插件，能够快速实现数据验证功能。在使用时，需要了解插件提供的 API，根据实际需求配置校验规则和自定义规则即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600564aa81e8991b448e17f1