Bootstrap

element的form表单自定义校验注意事项二

记录一下在使用element组件的自定义校验过程中遇到的小问题

公司主要用的框架是vue + element,表单的校验之前一直是判断是否有值弹框提示错误信息,建议可以统一使用element的校验方式后,项目的优化改造就开始了。
改造过程中也遇到一些问题,下面记录一下:
一、 图片选择校验,由于用的是基于业务封装好的选择图片组件,因此校验过程中,需要在el-form-item标签中添加ref,在获取到图片数据后,需要将校验清空
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
清空图片的时候,需要调用统一的校验方法
在这里插入图片描述

二、项目中有很多级联的数据校验,但是el-form-item表单上的prop可能只绑定了一个变量,因此就需要开发自定义校验规则。例如:先判断类型是什么,再判断类型下面的数组变量是否有值等情况。**自定义校验要注意的是 每一个if条件的else后面都需要返回回调函数。**否则就校验不通过!!!

    var validateJoinStore = (rule, value, callback) => {
      if (this.ruleForm.joinStoreType == 1 || this.ruleForm.joinStoreType == 2) {
        if (this.storeList && this.storeList.length == 0) {
          return callback(new Error('请选择门店'))
        } else {
          callback()
        }
      } else if (this.ruleForm.joinStoreType == 3) {
        if (this.labelsList && this.labelsList.length == 0) {
          return callback(new Error('请选择门店标签'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
;