element-ui-verify

本文章意在介绍element-ui-verify插件使用，以及对比elementUI原生校验方式，突显该插件用少量代码也能实现原生的校验效果甚至更好。

1.先观察一个示例

上面是官方文档的一个校验示例

上面是使用element-ui-verify插件的一个示例，把原来写在data里的校验变量改为el-form-item的属性来校验，使得代码更加得简洁了。

2.element-ui-verify插件介绍
本插件只是对 ElementUI 原本的校验方式做了一层封装，核心的校验器仍然是 async-validator，非侵入式，完全不会影响你继续使用 ElementUI 的原生校验。

3.element-ui-verify插件安装和使用
安装

npm install element-ui-verify

引入

import Vue from 'vue'
import elementUI from 'element-ui'
import elementUIVerify from 'element-ui-verify'// 这里注意必须得先use elementUI
Vue.use(elementUI)
Vue.use(elementUIVerify)

默认支持的校验规则属性

length: 校验文本长度
minLength: 校验文本最短长度
gt: 校验数字要大于某数
gte: 校验数字要大于等于某数
lt: 校验数字要小于某数
lte: 校验数字要小于等于某数
maxDecimalLength: 校验数字最大小数位
number: 校验是否为数字
int: 校验是否为整数
phone: 校验是否为手机号（随着号段的增加，未来可能需要更新）
email: 校验是否为电子邮件地址
verifyCode: 校验是否为 6 位数字验证码

插件的默认校验不通过提示模板

const errorMessageTemplate = {empty: '请补充该项内容',length: '请输入{length}位字符',minLength: '输入内容至少{minLength}位',number: '请输入数字',int: '请输入整数',lt: '输入数字应小于{lt}',lte: '输入数字不能大于{lte}',gt: '输入数字应大于{gt}',gte: '输入数字不能小于{gte}',maxDecimalLength: '该输入项最多接受{maxDecimalLength}位小数',phone: '请输入正确的手机号',email: '请输入正确的邮箱',verifyCode: '请输入正确的验证码'
}// 可以对上面默认的错误提示模板修改
// 如第一项修改（用于复用错误提示） empty: '{alias}不能为空'
// 然后使用修改后的模板
Vue.use(elementUIVerify, {errorMessageTemplate,fieldChange: 'verify'
})
// 其中 verify-当绑定字段变化时会实时触发校验，clear-当绑定字段变化时只清空校验结果，不触发校验

4.重要属性说明

verify

若要使用element-ui-verify插件，verify选项是必须的，如果没有配置该选项，那么仍可以正常使用ElementUI原生的校验。该选项还可以接收一个函数值，用于 自定义校验方法。

canBeEmpty

开启该项，一旦输入项为空则会忽略该输入项之后所有的校验。

space

开启该项，插件执行空检测时，输入空格可通过

emptyMessage

空检测错误提示

errorMessage

用于自定义校验不通过提示（空检测和自定义校验方法的错误提示不受该值影响）

alias

用于复用错误提示，需修改错误提示模板，如{ empty: ‘{ alias }不能为空’ }

watch

监听其他变量，触发自身校验

第一个例子，密码一致性校验

第二个例子，最少人数变化要触发最多人数的校验

export default {data () {return {model: {minNumber: '',maxNumber: ''},}
}

自定义校验方法

verify

自定义校验规则

addRule (适用于全局)

待续。。。