本文章意在介绍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>
export default {
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>
export default {
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>
export default {
data () {
return {
model: {
pass1: '',
pass2: ''
}
}
},
methods: {
verifyPassword (rule, val, callback) {
if (val !== this.model.pass1) callback(Error('两次输入密码不一致！'))
else callback()
}
}
}
</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>
export default {
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>
export default {
data () {
return {
model: {
cardNumber: ''
}
}
},
methods: {
// callback形式 校验是否是010，011开头的卡号
verifyCardNumber (rule, val, callback) {
if (!['010', '011'].includes(val.substr(0, 3))) callback(Error('错误的卡号'))
else callback()
}
}
}
</script>
addRule (适用于全局)
待续。。。