Ant vue中表单验证（动态校验、部分校验）

news2025/1/24 15:00:07

前提：写了超级复杂的表单，其中涉及了很多表单验证的地方，现一一记录一下；
ant-vue 版本1.7.8
vue 版本2.6.11
校验的原理大体相似，灵活应用！！

1.动态校验

需求：
1根据读写方式去动态自动校验规则；
2.只是监听挂载路径，但因嵌套太多，表单监听的表单域不满足自动监听的条件，需要关联表单域，使其根据校验规则自动生成；

（ant表单组件中Form.Item 会对唯一子元素进行劫持，并监听 blur 和 change 事件，来达到自动校验的目的，所以请确保表单域没有其它元素包裹。如果有多个子元素，将只会监听第一个子元素的变化。）

如下图：只读时会出现校验，不挂载时则不会出现校验；
在这里插入图片描述

//主要代码逻辑：
<template>
    <a-form-model ref="mountForm" :model="mountFormData">
        <div v-for="(item, index) in mountFormData.mountItem" :key="item.name">
            <a-form-model-item :ref="'mountPath' + index" :prop="'mountItem.' + index + '.mountPath'" :rules="[
                  {
                    required: item.type != 'isNull',
                    message: '请指定读写方式及挂载路径。',
                    trigger: 'blur'
                  },
                  {
                    required: item.type != 'isNull',
                    validator: vaildMountPath,
                    trigger: 'blur'
                  }
                ]">
                <a-row type="flex" justify="space-around" align="middle">
                    <a-col :span="8"> </a-col>
                    <a-col :span="8">
                        <a-select style="width: 98%" v-model="item.type">
                            <a-select-option value="isAll">读写</a-select-option>
                            <a-select-option value="isRead">只读</a-select-option>
                            <a-select-option value="isNull">不挂载</a-select-option>
                        </a-select>
                    </a-col>
                    <a-col :span="8">
                        <a-input :disabled="item.type == 'isNull'" placeholder="挂载路径" v-model="item.mountPath" @blur="
                        () => {
                          $refs[`mountPath${index}`][0].onFieldBlur()
                        }
                      ">
                        </a-input>
                    </a-col>
                </a-row>
            </a-form-model-item>
        </div>
    </a-form-model>
</template>
<script>
    export default {
        data() {
            const vaildMountPath = (rule, value, callback) => {
                //校验逻辑
                if (value) {
                 //新增名称是否已经存在——修改名称过滤掉本身等操作
                } else {
                    callback()
                }

            };
            return {
                vaildMountPath,
            };
        },
    };
    //去掉校验可以用——this.$refs.mountForm.resetFields()
</script>

实现动态校验重点：

:prop=“‘mountItem.’ + index + ‘.mountPath’”,要不根本找不到校验不了；
关联表单域，在你需要校验的地方，使用 @blur,@change进行关联；本问是对挂在路径的input进行校验的，因为嵌套的太多，无法触发自动校验固进行关联
@blur="
() => {
$re f s [‘ m o u n tP a t h$ {index}`][0].onFieldBlur()
}
">

2.部分校验

因业务需求需分步对表单进行校验，所以需要使用部分校验功能；
本例如图，点击下一步时，只对名称、版本进行校验；

//主要代码逻辑：
<script>
    export default {
        methods: {
            next() {
                //需要定义一个成功校验标识
                let isError = false
                this.$refs.ruleForm.validateField(['name', 'version'], valid => {
                    if (valid) {
                        isError = true
                    }
                })
                if (!isError) {
                    //校验成功之后的逻辑
                }
            },
        },
    };
</script>