Ant vue中表单验证(动态校验、部分校验)

前提:写了超级复杂的表单,其中涉及了很多表单验证的地方,现一一记录一下;
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> 

实现动态校验重点:

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

2.部分校验

因业务需求需分步对表单进行校验,所以需要使用部分校验功能;
本例如图, 点击下一步时,只对名称、版本进行校验;
Ant vue中表单验证(动态校验、部分校验)_第1张图片

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

validateField方法中callback回调的时错误信息,故需要定义一个成功标识!!根据成功标识去写你校验成功的逻辑

总结:
1.多看官方文档;
2.多写多总结,无论时动态校验还是普通校验——prop和绑定的值要保持一致,这样才能实现规则校验。动态校验 多用于处理数组对象,模板上使用v-for,所以我写的时候都会把规则写在模板里,而不是data里,如果有好的实现希望有心人能告诉我,谢谢!!

你可能感兴趣的:(前端Vue,vue.js,javascript,前端)