ElementUI对子组件进行验证

Question

如何验证表单中的子组件?

在form组件中，我有子组件:

<template>
<el-form :model="value">
<el-form-item 
prop="name" 
:rules="{ required: true, message: 'Necessary', trigger: 'blur' }"
>
<el-input v-model="value.name">
</el-form-item>
<ZipCode v-model="value.zipcode" />
</el-form>
</template>

<script>
export default {
props: {
value: { 
type: Object, 
default: () => { 
return { 
name: null, 
zipcode: { code: null, local: null }
} 
}
}
}
}
</script>

在ZipCode组件中:

<template>
<el-form-item 
prop="code" 
:rules="{ required: true, message: 'Necessary', trigger: 'blur' }"
>
<el-input v-model="value.code">
</el-form-item>
<el-form-item 
prop="local" 
:rules="{ required: true, message: 'Necessary', trigger: 'blur' }"
>
<el-input v-model="value.local">
</el-form-item>
</template>

<script>
export default {
props: {
value: { 
type: Object, 
default: () => { return { code: null, local: null } } 
}
}
}
</script>

表单组件上的验证按预期工作，但子组件上的验证没有。如果字段有数据，仍然给出需要数据的错误。这个错误验证也在form组件中起作用。

问题可能出在"prop"字段。如果将prop更改为value。code"或";zipcode.code"提示错误"error: please transfer a valid prop path to form item"。

可能是什么问题?谢谢你的帮助。

Answer 1

规则的类型应该是一个'object'，每个子规则都有一个fields属性。

<el-form :model="value" :rules="
{
name: [
{ required: true, message: 'Please input name', trigger: 'blur' }
],
zipcode: {
type: 'object',
required: true,
fields: {
code: { type: 'string', required: true, len: 8, message: 'invalid zip' },
local: { type: 'string', required: true, message: 'required' }
}
}
}
">