欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

element-ui-verify使用

程序员文章站 2022-06-03 09:38:32
element-ui-verify是对ElementUI原本的校验封装之后的插件,并不会影响使用ElementUI的原生校验。 使用环境为vue+element-ui+webpack模块环境,首先使用淘宝镜像安装cnpm install -s element-ui-verify,安装之后在main. ......

  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 校验是否为手机号(随着号段的增加,未来可能需要更新)
email 校验是否为电子邮件地址
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>