还在为ElementUI的原生校验方式苦恼吗，快用享受element-ui-verify插件的快乐吧（待续）

element-ui-verify

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

1.先观察一个示例

<template><d2-container><el-form :model="ruleForm":rules="rules" label-width="100px"><el-form-item label="活动名称" prop="name"><el-input v-model="ruleForm.name" style="width: 200px"></el-input></el-form-item></el-form></d2-container></template><script>exportdefault{data(){return{ruleForm:{name:''},rules:{name:[{required:true,message:'请输入活动名称',trigger:'blur'},{min:3,max:5,message:'长度在 3 到 5 个字符',trigger:'blur'}]}}}}</script>

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

<template><d2-container><el-form :model="ruleForm2" label-width="100px"><el-form-item label="活动名称" prop="name"verify:minLength="3":maxLength="5"><el-input v-model="ruleForm2.name" style="width: 200px"></el-input></el-form-item></el-form></d2-container></template><script>exportdefault{data(){return{ruleForm2:{name:''}}}}</script>

上面是使用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

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

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

<template><d2-container><!-- 使用watch属性 密码一致性校验 --><el-form :model="model"><el-form-item label="密码" prop="pass1" verify><el-input v-model="model.pass1" style="width: 200px"></el-input></el-form-item><el-form-item label="确认密码" prop="pass2":verify="verifyPassword":watch="model.pass1"><el-input v-model="model.pass2" style="width: 200px"></el-input></el-form-item></el-form></d2-container></template><script>exportdefault{data(){return{model:{pass1:'',pass2:''}}},methods:{verifyPassword(rule, val, callback){if(val !==this.model.pass1)callback(Error('两次输入密码不一致！'))elsecallback()}}}</script>

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

<template><d2-container><!-- 最少人数变化要触发最多人数的校验 --><el-form :model="model"><el-form-item label="最少参与人数" prop="minNumber" verify int :gt="0"><el-input v-model="model.minNumber" style="width: 200px"></el-input></el-form-item><el-form-item label="最多参与人数" prop="maxNumber" verify int :gt="model.minNumber"><el-input v-model="model.maxNumber" style="width: 200px"></el-input></el-form-item></el-form></d2-container></template>exportdefault{data(){return{model:{minNumber:'',maxNumber:''},}}

自定义校验方法

verify

<template><d2-container><!-- 自定义校验方法 --><el-form :model="model"><el-form-item label="卡号" prop="cardNumber":verify="verifyCardNumber":length="6"><el-input v-model="model.cardNumber" style="width: 200px"></el-input></el-form-item></el-form></d2-container></template><script>exportdefault{data(){return{model:{cardNumber:''}}},methods:{// callback形式 校验是否是010，011开头的卡号verifyCardNumber(rule, val, callback){if(!['010','011'].includes(val.substr(0,3)))callback(Error('错误的卡号'))elsecallback()}}}</script>

自定义校验规则

addRule (适用于全局)

待续。。。