element-ui-verify使用
Posted xiaohong0128
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了element-ui-verify使用相关的知识,希望对你有一定的参考价值。
element-ui-verify是对ElementUI原本的校验封装之后的插件,并不会影响使用ElementUI的原生校验。
使用环境为vue+
element-ui+
webpack模块环境,
首先使用淘宝镜像安装cnpm install -s element-ui-verify,安装之后在main.js中引入并使用
1 import elementUIVerify from ‘element-ui-verify‘ 2 3 // 注意使用之前必须要先use elementUI 4 Vue.use(elementUIVerify)
main.js使用之后就可以直接在el-form-item标签上使用校验规则了,例如下面代码表示内容大于0的校验:
1 <el-form-item label="年龄" prop="age" verify int :gt="0"> 2 <el-input v-model.number="model.age"></el-input> 3 </el-form-item>
默认支持的校验规则
length | 校验文本长度 |
minLength | 校验文本最短长度 |
gt | 校验数字要大于某数 |
gte | 校验数字要大于等于某数 |
lt | 校验数字要小于某数 |
lte | 校验数字要小于等于某数 |
maxDecimalLength | 校验数字最大小数位 |
number | 校验是否为数字 |
int | 校验是否为整数 |
phone | 校验是否为手机号(随着号段的增加,未来可能需要更新) |
校验是否为电子邮件地址 | |
verifyCode | 校验是否为6位数字验证码 |
使用这个插件,verify是必须的,如果想使用原生的elementUI校验规则就不需要写verify。
其他关键字说名
canBeEmpty:可以为空,当不为空时又需要校验;
space:使用该关键字时空格也参加校验;
emptyMessage:空检测错误提示;
errorMessage:自定义校验不通过提示;
1 <el-form-item prop="numberProp" verify number error-message="请输入正确的数字"></el-form-item>
alias:复用错误提示,插件默认值:"该输入项",使用这个关键字可以{alias}不能为空
例如空检测错误提示模板为:
1 {empty: ‘{alias}不能为空‘}
表单内容为:
1 <el-form-item prop="unknown" verify></el-form-item> 2 <el-form-item alias="姓名" prop="name" verify></el-form-item> 3 <el-form-item label="地址" prop="address" verify></el-form-item>
- 当
unknown
输入框为空时,会提示"该输入项不能为空"(alias值默认为"该输入项") - 当
姓名
输入框为空时,会提示"姓名不能为空"(显式设置了alias值时,提示内容自然会以该值去替换模板) - 当
地址
输入框为空时,会提示"地址不能为空"(大部分el-form-item都需要设置一个label项,而label项往往就代表该输入项的alias,因此插件会取该值直接作为alias)
watch:监听其他变量触发自身校验,例如修改密码
1 <template> 2 <el-form :model="model"> 3 <el-form-item label="密码" prop="pass1" verify> 4 <el-input v-model="model.pass1"></el-input> 5 </el-form-item> 6 <el-form-item label="确认密码" prop="pass2" :verify="verifyPassword" :watch="model.pass1"> 7 <el-input v-model="model.pass2"></el-input> 8 </el-form-item> 9 </el-form> 10 </template> 11 <script> 12 export default{ 13 data () { 14 return { 15 model: { 16 pass1: ‘‘, 17 pass2: ‘‘ 18 } 19 } 20 }, 21 methods: { 22 verifyPassword (rule, val, callback) { 23 if (val !== this.model.pass1) callback(Error(‘两次输入密码不一致!‘)) 24 else callback() 25 } 26 } 27 } 28 </script>
以上是关于element-ui-verify使用的主要内容,如果未能解决你的问题,请参考以下文章
Android课程---Android Studio使用小技巧:提取方法代码片段