ElementUI 使用子组件进行验证

问题描述

如何验证表单内的子组件？

在表单组件中我有子组件：

<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,trigger: 'blur' }"
  >
    <el-input v-model="value.code">
  </el-form-item>

  <el-form-item 
    prop="local" 
    :rules="{ required: true,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>

表单组件上的验证按预期工作，但子组件上的验证不正常。如果该字段有数据，仍然给出需要数据的错误。这种错误的验证也适用于表单组件。

所以问题可能出在“prop”字段上。如果将道具更改为“value.code”或“zipcode.code”，则会出现错误“错误：请将有效的道具路径传输到表单项”。

可能是什么问题？感谢您的帮助。

解决方法

规则的类型应该是一个“对象”，每个子规则都有一个字段属性。

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

validation vue.js