V-Verify
v-verify 是 vue.js 的表单验证插件,它主要利用 vue.js
指令将验证逻辑放进 html
中,它主要针对用用户输入信息的验证处理。
特性
- 高度灵活、可配置(自主选择验证器触发的时机、自定义错误提示信息、自定义验证规则、自定义错误展示样式)。
- 轻便、逻辑简单、使用方便、打包后代码不到4kb。
- 支持初始化验证和提交时验证,提交数据时不用写任何验证逻辑
- 支持用在
vue
组件(components)中(组件必须有v-model
指令才能生效) - 支持根据
v-verify
params 变化动态使用验证器)
安装
V-Verify 已经发布在 npm, 可以使用 npm
和 yarn
安装,暂时不支持直接通过 <script>
在网页中引入。
npm / yarn 安装
npm install --save v-verify
或者
yarn add v-verify
文档
https://joinyi.github.io/v-verify/
使用
v-verify 和其他的 vue
插件一样,使用 Vue.use()
方法注册。
Vue
配置(config)
考虑到验证场景的高度个性化,v-verify 提供了比较少的公共验证器,你可以在 v-verify
定义你自己的验证器,如果和公共验证器重复,自定义的验证器将会覆盖公共验证器。
Vue
验证器定义支持三种形式
- 正则表达式
- 正则表达式列表
- 函数,必须返回布尔值
当自定义了验证器,你最好提供对应的验证提示消息
Config Name | Default | Description |
---|---|---|
lang | zh_cn | 消息提示语言,有 zh_cn 和 `en_us` 两种选择,默认 zh_cn |
mode | insert | 消息提示展示方式,有 `insert` 和 `tip` 两种展示方式,默认以全局 config 为准,当指令 v-verify 中有指定,则指令覆盖全局 config 中配置。 |
errorClass | null | 消息提示的样式,如果为 null, 则为默认样式,当指令 v-verify 中有指定,则指令覆盖全局 config 中配置 |
errorIcon | null | 消息提示 icon 的样式,如果为 null, 则无icon,当指令 v-verify 中有指定,则指令覆盖全局 config 中配置 |
errorForm | null | errorForm(className) 样式将添加到 v-verify 指令上到dom元素上,当指令 v-verify 中有指定,则指令覆盖全局 config 中配置| |
validators | null | 自定义验证器支持三种形式 正则表达式 正则表达式列表 函数(必须返回布尔值) |
messages | null | 自定义验证器验证消息,和 validators 一一对应关系 |
自定义验证器
比如你说你有一个需求只能接受以 zing.com
结尾的公司邮箱,你就可以这样自定义
Vue
如果有参数, 可以在 value
后面直接加参数, 然后用符号 :
传参
{ ...}
使用
v-verify
的使用非常简单, 它提供了最多5个选项但只有 regs
是必需的
其中修饰符 input
和 blur
是 v-verify 提供的验证触发时机, 当指令 v-verify
加在 vue
组件上时,不需要添加触发时机修饰符, 但是必需要有 v-model
指令。
Param Name | Required | Description |
---|---|---|
regs | 是 | 验证器列表 以符号 竖号 分隔 |
mode | 否 | 验证消息提示,将覆盖全局配置 |
name | 否 | 字段名称,会展示在验证消息中 |
submit | 否 | 当需要在提交到服务器前进行二次验证,必需要有submit属性,它的作用相当于标示验证器,具体看文档 |
style | 否 | 将覆盖 全局 errorForm 配置 |
欢迎使用,如果有好的建议或issue,欢迎一起讨论。
好了, 是不是很简单。快去看基本用例吧