vue ant 灵活运用表单验证规则rules

1. 动态新增项为必填

<div class="card" v-for="(item, index) in model.newArr" :key="index">
            <a-form-model-item :rules=[{required: true, message: "请输入开始数值", trigger: 'blur'}] :label="第{index}项" :prop="`newArr[${index}]`">
                <a-input-number :min="1" :max="100" v-model="model.newArr[index]" :placeholder="`第${index}项`" />
            </a-form-model-item>
</div> 

2.清除指定校验状态

this.$refs.form.clearValidate('propName')

3.动态新增有起始数(start)~终止数(end)，且动态判断start <= end，且上一组的终止数(end) < 下一组的起始数(start)

// html
　　　　<div class="card" v-for="(item, index) in model.newArr" :key="index">
            <!-- label=" " 显示必填* -->
            <a-form-model-item :rules=[
                {required: true, message: "请输入开始数值", trigger: 'blur'},
                {validator: (rule, value, callback) => validator(rule, value, callback, index, 'start'), trigger: 'blur'}]
                label=" " :prop="`newArr[${index}].start`">
                <a-input-number :min="1" :max="100" v-model="model.newArr[index].start" :placeholder="`第${index}项 起始数`" />
            </a-form-model-item>
            --
            <a-form-model-item :rules=[
                {required: true, message: "请输入结束数值", trigger: 'blur'},
                {validator: (rule, value, callback) => validator(rule, value, callback, index, 'end'), trigger: 'blur'}]
                label=" " :prop="`newArr[${index}].end`">
                <a-input-number :min="1" :max="100" v-model="model.newArr[index].end" :placeholder="`第${index}项 结束数`" />
            </a-form-model-item>
        </div>

// js
function validator(rule, value, callback, index, type) {
    let start = type == 'start' ? value : this.model.newArr[index].start,
        end = type == 'end' ? value : this.model.newArr[index].end,
        isFirst = index == 0,
        isLast = index == (this.model.newArr.length - 1)
    if (type == 'start') {
        if (end) {
            if (end < start) callback(new Error('请小于结束数字'))
            else this.$refs.form.clearValidate(`newArr[${index}].end`)
            this.$refs.form.clearValidate('propName')
        }
        if (!isFirst) {
            let preEnd = this.model.newArr[index - 1].end
            if (preEnd && preEnd >= start) callback(new Error('请大于上一分组的结束数字'))
            else this.$refs.form.clearValidate(`newArr[${index - 1}].end`)
        }
        callback()
    } else if (type == 'end') {
        if (start) {
            if (end < start) callback(new Error('请大于该组起始数字'))
            else this.$refs.form.clearValidate(`newArr[${index}].start`)
        }
        if (!isLast) {
            let nextStart = this.model.newArr[index + 1].start
            if (nextStart && end >= nextStart) callback(new Error('请小于下一分组起始数字'))
            else this.$refs.form.clearValidate(`newArr[${index + 1}].start`)
        }
        callback()
    } else {
        callback()
    }
}