发布时间:2023-11-27 17:30
前提:写了超级复杂的表单,其中涉及了很多表单验证的地方,现一一记录一下;
ant-vue 版本1.7.8
vue 版本2.6.11
校验的原理大体相似,灵活应用!!
需求:
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="
() => {
r e f s [ ‘ m o u n t P a t h refs[`mountPath refs[‘mountPath{index}`][0].onFieldBlur()
}
">
因业务需求需分步对表单进行校验,所以需要使用部分校验功能;
本例如图, 点击下一步时,只对名称、版本进行校验;
//主要代码逻辑:
<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里,如果有好的实现希望有心人能告诉我,谢谢!!