element ui的动态校验的写法(变量动态校验,动态提示信息)与注意事项
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
1. 使用变量动态检验必填
rules: {// 表单校验
uploadFile2: [{ required: this.file2IsRequired, message: '${this.upload.uploadTitle2}不能为空', trigger: 'change' }],
...
},
注意:
1. 必填项required的值可以动态设置 , 但是这个参数(例如file2IsRequired)必须定义在rules同级目录下(也就是this.file2IsRequired这样可以拿到),不能放到其他参数里面(例如this.xxx.file2IsRequired才能拿到),否则页面会报错。
2. 提示信息也可以动态显示,但是提示信息的格式需要注意,如上,不能使用普通的字符串拼接,而是加上${}拼接上去),并且需要使用 ``符号,例如:`${this.xxx}不能为空`
2. 使用自定义校验方法返回动态校验提示信息 message
rules: {// 表单校验
title: [{
// { required: true, message: "邮件主题不能为空", trigger: "blur" }
validator:(rule, value, callback)=>{
if(value == null || value == '' ){ //如果是上传组件value一直为null ,因此无法这样写自定义校验
callback(`${this.uploadTitle1}不能为空`);
}
},
trigger: 'change'
}],
}
注意:以上的写法可以动态显示提示信息,但是不适用于附件的校验,因为如果是上传附件validator的value永远都是null
3. 使用自定义校验方法,自定义校验附件,并且返回动态的提示信息
/** 提交按钮 */
submitForm(op, optext) {
this.$refs["form"].validate(valid => { //触发表单所有项的校验规则检查
if (valid) { // 表单校验通过才执行
this.$refs.uploadExcel1.submit(); //触发上传组件提交方法uploadFile(param)
if(!this.validationFile()){//附件校验不通过就结束
return;
}
}
})
}
上传组件的写法请参考ElementUI的el-upload上传组件与表单一起提交遇到的各种问题以及解决办法(超详细,每个步骤都有详细解读)-CSDN博客
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:5 个月前 )
c345bb45
9 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 9 个月前
更多推荐
已为社区贡献9条内容
所有评论(0)