element ui的动态校验的写法(变量动态校验,动态提示信息)与注意事项

17 篇文章 0 订阅

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博客

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

往事不堪回首..

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值