ElementUI 使用子组件进行验证答案

【问题标题】：ElementUI doing validation with Sub ComponentElementUI 使用子组件进行验证
【发布时间】：2021-05-09 19:39:46
【问题描述】：

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

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

<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”字段上。如果将 prop 更改为“value.code”或“zipcode.code”，则会出现错误“错误：请将有效的 prop 路径传输到表单项”。

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

【问题讨论】：

尝试修正<el-form-item> 上的拼写错误，它们以) 而不是> 结尾。如果这不能解决问题，您应该发布验证码
@Dan 谢谢，这只是一个错字。验证由 ElementUI 按照 :rules 属性自动完成。
</el-form> 也没有正确关闭。最重要的是，最好从父脚本中看到您的 value 对象
@Dan 好的，刚刚添加。
仍然没有足够的代码。您正在为表单模型使用道具，我们无法看到对象的完整结构是什么，因为它是道具（更不用说它正在被变异，这是一个禁忌）

标签： vue.js validation element-ui

【解决方案1】：

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

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

【讨论】：