还在为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>
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 (适用于全局)

待续。。。

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

QQ空间及邮箱验证码登录的校验方式及自动登录的解决方案
目前有很多的SNS社区或类SNS的网站,例如开心.51.校内等,但是发现大多数社区在邀请好友的时候都没有提供对QQ邮箱或者QQ空间好友列表获取的功能,不过似乎海内支持,但是网上相关QQ的文章还不是很多 ...
python小程序嵌入excel_用原生的方式操作Excel，Python玩转Excel神器xlsxwriter详解！...
大家好,在之前的Python办公自动化系列文章中,我们已经介绍了两个Python操作Excel的库openpyxl与xlwings,并且相信大家已经了解这两者之间的异同. 但是在Python中操作Ex ...
串口通信校验方式：奇偶校验、累加和校验
转载自:https://zhuanlan.zhihu.com/p/29693940 串口通信校验方式:奇偶校验.累加和校验许佳伟利用串口传输数据时,近距离传输还好,远距离传输由于线路长度影响,可能 ...
用原生的方式操作Excel，Python玩转Excel神器xlsxwriter详解！
来源:早起Python 本文就将介绍一个强大的库xlsxwriter.来学习如何用原生的方式操作Excel! 首先还是来简单了解下这三个库之间的区别 " openpyxl:只允许读取和写入. ...
Ajax和JSON-学习笔记01【原生JS方式实现Ajax】
Java后端学习路线笔记汇总表[黑马程序员] Ajax和JSON-学习笔记01[原生JS方式实现Ajax] Ajax和JSON-学习笔记02[JQuery方式实现Ajax] Ajax和JSON-学 ...
串口MSComm控件五种不同校验方式对数据收发的影响
(2008-09-10 14:50:00) http://blog.sina.com.cn/s/blog_470eccc60100arq7.html 串口MSComm控件有五种校验方式,分别是 ...
第十节：进一步扩展两种安全校验方式
一. 简介简介: 上一节中,主要介绍了JWT校验,它是无状态的,是基于Token校验的一种升级,它适用的范围很广泛,APP.JS前端.后台等等客户端调用服务器端的校验.本节补充几种后台接口的校验方式 ...
Struts2输入校验之validate输入校验方式
一.在Web系统项目中有大量的视图页面需要用户自行输入很多数据.这些数据的类型有很多种.为了防止某些客户的恶意输入以及对Web项目的恶意破坏,必须引入输入校验,像Windows操作系统的防火墙一样把一 ...
C语言基础入门48篇_26_身份证号校验程序（以身份证的校验方式是实例加深对数组及函数封装的理解、字符-‘0‘得到字符对应的int类型数字）
本篇根据以二代身份证的校验方式是实例加深对数组及函数封装的理解 1. 第二代身份证号的组成第二代身份证号为18位,各位数字对应了不同的信息(以下顺序从左往右): AABBCCYYYYMMDDXXXV ...

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

element-ui-verify

自定义校验方法

自定义校验规则

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

最新文章

热门文章