vue中el-form表单的动态校验问题

Question

 <el-form-item
            class="form-item-invsStatus"
            label="开票时间："
            prop="arbAdditionInfo.invsStatus"
          >
            <el-radio-group v-model="publishForm.arbAdditionInfo.invsStatus">
              <el-radio label="KQ">付款前开发票</el-radio>
              <el-radio label="KH">付款后开发票</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            class="form-item-invsStatus"
            prop="arbAdditionInfo.invsDay"
         
            :rules="[{required:!this.invsDayShow,message:'请选择',trigger:'blur'}]"
          >
// 这里我想   :rules="[{required:!this.invsDayShow,      validator: validatePayAfterData,,trigger:'blur'}]"这样写 但是报错了 所以就用不到我自己写的校验规则了
            <!-- :class="{active: stepNum === index}" -->
            <div
              style="font-size: 14px"
              :style="{
                color:
                  publishForm.arbAdditionInfo.invsStatus == 'KH'
                    ? '#000'
                    : '#c0c4cc',
              }"
            >
              付款之日起【<el-input
                class="input-width-small"
                :disabled="this.invsDayShow"
                v-model="publishForm.arbAdditionInfo.invsDay"
                size="mini"
              ></el-input
              >】个工作日内开票
            </div>
          </el-form-item>

        "arbAdditionInfo.invsDay": [
          {
        
            validator: validatePayAfterData,
            trigger: ["blur", "change"],
          },
        ],

     var validatePayAfterData = (rule, value, callback) => {
      if (!value || isNaN(value) || value <= 0 || value > 30) {
        return callback(new Error("请输入 1 ~ 30之间日期"));
      } else {
        callback();
      }
    };

我通过动态来校验规则百度搜到了这种方法 但是只能校验到message这个方法 校验自己写的规则校验不到 直接写上去会报错 下面的是我自己写的规则 还有没有更好的方法

Answer 1

校验函数是没有问题的，这边猜测是引用时候的问题，检查一下：

1. 我看到注释中在validator参数后多了一个逗号；
2. 这个校验函数要在html中直接调用的话，它首先需要是一个全局变量，this要能找到它，直接定义在data中或methods中都可以，类似：

data() {
   return {
     validatePayAfterData: (rule, value, callback)=> {
      ......
      },
   }
},

或：

methods: {
    validatePayAfterData(rule, value, callback) {
    ......
    },
  },

直接放在data的rules中的话，也可以：
那就是这样子：

 <el-form :model="publishForm" :rules="rules">

 data() {
    const validatePayAfterData = (rule, value, callback) => {
     .......
    };
    return {
      rules: {
        'arbAdditionInfo.invsDay': [{ validator: validDate, trigger: 'blur' }],
      },
    };
  },

都是OK的，可以康康自己是哪里存在问题吼

然后上面的代码里，html中的this需要去除一下应该，校验函数里的!value这个判断也可以省略~