v-verify
v1.1.1
Published
a plugin of vue.js for input validate
Downloads
5
Readme
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()
方法注册。
import Vue form 'vue'
import vverify from 'v-verify'
Vue.use(vverify, config)
配置(config)
考虑到验证场景的高度个性化,v-verify 提供了比较少的公共验证器,你可以在 v-verify
定义你自己的验证器,如果和公共验证器重复,自定义的验证器将会覆盖公共验证器。
Vue.use(vverify, {
lang: 'zh_cn', // 提示语言 默认 中文
mode: 'insert' | 'tip', // v-verify 提供了 tip 和 insert 两种错误展示方式
errorClass: '', // 错误消息样式
errorIcon: '', // String 错误提示 icon 样式
errorForm: '', // 错误消息样式
validators: { // 自定义验证器
email: RegExp|[RegExp, ...]|Function,
...
},
messages: { // 验证器消息提示
email: (filed) => `${filed}不符合指定邮箱格式`, // return 提示信息
...
}
})
验证器定义支持三种形式
- 正则表达式
- 正则表达式列表
- 函数,必须返回布尔值
当自定义了验证器,你最好提供对应的验证提示消息
| 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.use(vverify, {
lang: 'zh-cn', // 提示语言
mode: 'insert',
errorClass: 'example-error',
errorIcon: 'icon-warn iconfont',
validators: { // 自定义验证器
zing: (value) => {
return /^[a-zA-Z0-9_-]+@zing\\.com$/.test(value)
},
...
},
messages: { // 验证器消息提示
zing: (filed) => `${filed}必须以@zing.com结尾`,
...
}
})
<input class="example-input"
v-verify.input.blur="'required|email|zing'"
placeholder="YYYY-MM-DD"/>
如果有参数, 可以在 value
后面直接加参数, 然后用符号 :
传参
(value, params) => {
...
}
使用
v-verify
的使用非常简单, 它提供了最多5个选项但只有 regs
是必需的
<input class="example-input"
v-verify.input.blur="{
regs: 'required|date',
mode: 'xxx',
name: 'xxx',
submit: 'xxx',
style: 'xxx'
}"
placeholder="YYYY-MM-DD"/>
其中修饰符 input
和 blur
是 v-verify 提供的验证触发时机, 当指令 v-verify
加在 vue
组件上时,不需要添加触发时机修饰符, 但是必需要有 v-model
指令。
| Param Name | Required | Description | |--------|----------|-------------| | regs | 是 | 验证器列表 以符号 竖号 分隔 | | mode | 否 | 验证消息提示,将覆盖全局配置 | | name | 否 | 字段名称,会展示在验证消息中 | | submit | 否 | 当需要在提交到服务器前进行二次验证,必需要有submit属性,它的作用相当于标示验证器,具体看文档 | |style | 否 |将覆盖 全局 errorForm 配置 |
欢迎使用,如果有好的建议或issue,欢迎一起讨论。
好了, 是不是很简单。快去看基本用例吧