Vue.js 表单校验插件

Vue.js表单校验插件：Vuerify与应用指南

在Vue.js开发中，表单校验是一个常见的需求。今天，我们要介绍的是一款轻量且功能强大的Vue.js表单校验插件——Vuerify。

Vuerify是一款简单易用的数据校验插件，它内置了基础的校验规则和友好的错误提示。该插件支持自定义规则，规则类型可以是正则表达式、函数或字符串。校验规则可以全局注册，也可以组件内注册。

一、安装与引入

安装Vuerify非常简单，只需通过npm进行安装。

二、使用

安装完插件后，可以在Vue项目中使用它。可以添加自定义规则，这些规则可以是正则表达式或函数。

例如，在组件内注册校验规则：

```javascript

data () {

return {

username: '',

password: ''

}

},

vuerify: {

username: {

test: /\w{4,}/, // 自定义规则，可以是函数，正则或者全局注册的规则（填字符串）

message: '用户名至少包含 4 位字符'

},

password: 'required' // 使用全局注册的规则

}

```

三, API说明

$vuerify包含了如下属性：

$errors：数据校验失败的错误信息。例如，username校验失败会返回{ username: '用户名至少包含 4 位字符' }。

invalid：存在校验失败的字段。

valid：不存在校验失败的字段。

check：检查指定字段，传入数组，返回Boolean。

clear：清空错误列表。

四、v-vuerify指令

v-vuerify指令可以在表单组件触发blur事件时验证数据，并为组件设置类名（默认为.vuerify-invalid）。适用于input等原生组件或自定义组件。该指令提供了两个版本，分别适用于Vue 1.x和Vue 2.0。

用法如下：

```javascript

import Vue from 'vue'

import VuerifyDirective from 'v-vuerify' // Vue1.x

// 或

import VuerifyDirective from 'v-vuerify-next' // Vue2.0

Vue.use(VuerifyDirective)

```

在模板中使用：

``

``

v-vuerify指令支持一些参数和修饰符，如verifyInvalidClass和parent等。还提供了两个事件vuerify-invalid和vuerify-valid。

五、GitHub项目地址

（此处应提供Vuerify的GitHub项目地址）

Vuerify是一款功能强大、使用简单的Vue.js表单校验插件。通过全局注册和组件内注册的方式，可以灵活地满足各种表单校验需求。希望这篇文章能帮助你更好地理解和使用Vuerify。