什么是 vue-validity？
vue-validity 是一个基于 Vue.js 框架的表单验证插件，通过该插件可以快速实现表单验证的功能，使表单的交互更加友好和可靠。
安装和使用
安装
vue-validity 可以通过 npm 包管理器进行安装:
npm install vue-validity
引入
在需要验证表单的 Vue 组件中引入 vue-validity：
import Vue from 'vue' import VueValidity from 'vue-validity' Vue.use(VueValidity)
组件模板
在模板中添加需要验证的表单，使用 v-validate 指令来声明需要验证的字段。例如：
-- -------------------- ---- -------
----------
----- -----------------------------
-----
-------------------
------ ----------- ----------------------- ----------------------------------
----- --------------------------------------------------
------
-----
------------------
------ --------------- ----------------------- ------------------------
----- --------------------------------------------
------
-------
-----------在 input 元素中添加 v-validate 指令，传入需要验证的规则，多个规则之间使用管道符“|”进行连接。规则可以是 vue-validity 定义的规则，也可以自定义规则。上述示例中，“required|alpha_num” 表示必须输入，且只能输入字母或数字，而“required” 则表示必须输入，没有其他限制。
在模板中添加错误提示，需要使用 errors 对象的 has 方法判断某个字段是否有错误，如果有错误，则显示对应的提示。例如：“errors.has('username')” 表示判断 “username” 字段是否有错误，如果有，则显示对应的提示信息。
表单验证
在 Vue 组件中定义 form 数据和 submitForm 方法：
-- -------------------- ---- -------
--------
------ ------- -
------ -
------ -
----- -
--------- ---
--------- --
-
-
--
-------- -
------------ -
-- --------------------------- -
-- -----------
-
-
-
-
---------在 submitForm 方法中，通过 this.$validity.validate() 方法来验证表单，该方法返回一个布尔值，表示表单是否验证通过。如果验证通过，则可以提交表单数据；否则，显示错误提示信息。
自定义验证规则
vue-validity 提供了一些常用验证规则，如 “required”、“email”、“url” 等等。如果需要自定义验证规则，可以使用 extendRules 方法。例如，在 Vue 组件的 created 生命周期中，添加自定义规则：
-- -------------------- ---- -------
--------
------ ------- -
--------- -
----------------------------
--------- -
-------- ------------------- ---- -----
--------- ------- -- -
------ -------------------------------------------------------
-
-
--
-
-
---------在上述代码中，使用 extendRules 方法扩展规则，定义了一个名为 “password” 的规则，包括规则的提示信息和验证方法。验证方法中使用正则表达式判断密码是否包含大小写字母和数字，且长度为 6~20 个字符。
在模板中使用该规则，可以像使用内置规则一样引用，例如：
<input type="password" v-model="form.password" v-validate="'required|password'">
<span v-show="errors.has('password')">密码必须包含大小写字母和数字，长度为 6~20 个字符</span>总结
通过使用 vue-validity 插件，我们可以轻松地实现表单验证功能，提高表单的交互、友好和可靠性。本文介绍了 vue-validity 的安装和使用方法、常用验证规则以及自定义规则，希望对大家的开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005573481e8991b448d427b