ElementUI 使用子组件进行验证

Question

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

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

<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>

表单组件的验证按预期工作，但子组件的验证不正常。如果该字段有数据，仍然报数据为必填项的错误。这种错误验证也适用于表单组件。

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

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

Answer 1

规则的类型应为 'object'，每个子规则都有一个属性字段。

  <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' }
        }
      }
    }
  ">

ElementUI 使用子组件进行验证

ElementUI doing validation with Sub Component

validation

vue.js

element-ui