element 表单 el-form-item 动态验证

项目中遇到一个需求

当证件类型变化时,下面的证件号码,验证会发生变化,他可能是身份证,可能是港澳通行政...
这时候就不用el-form上的rules, 而是el-form-item上的rules

            <el-form-item
              label="证件号码"
              prop="sfzh"
              :rules="validateType"
            >
              <el-input
                v-model.trim="form.sfzh"
              />
            </el-form-item>

其中validateType 是定义在computed中的,动态返回rules,根据form.zjlx来动态改变rules;
最好不要定义在行内,因为如果你定义在行内,如果用到了自定义验证函数,他会找不到的(this指向问题),除非你的自定义函数也定义在methods里..

  computed: {
    validateType() {
      return this.form.zjlx === '1'
        ? [{ validator: 自定义验证函数 }]
        : []
    },
  },

需要注意的一点是:如果你选的使用el-form-item上的rules来验证,那么el-form里的rules就不要再次对该字段验证了,否则可能会出现问题!!