Vuelidate：使用子组件验证表单

Posted 2023-02-23

【中文标题】Vuelidate：使用子组件验证表单

【英文标题】：Vuelidate: validate form with sub components

【发布时间】：2019-06-18 00:49:36

【问题描述】：

如何使用Vuelidate 验证父组件内的嵌套组件？如果子组件中的输入有效与否，我想更改parentForm.$invalid。

家长：

<parent-component>
  </child-component-1>
  </child-component-2>
</parent-component>

validations: 
  parent: WHAT HERE?

孩子 1

<child-component-1>
  </some-input>
</child-component-1>

data() 
  return 
    someInput: ""
  ;
,

validations: 
  someInput: required

孩子 2

<child-component-2>
  </some-input>
</child-component-2>

data() 
  return 
    someInput: ""
  ;
,

validations: 
  someInput: required

【参考方案1】：

我可能不是 Vue 方面的专家。 如果您在子组件中声明了验证，并且您想从父组件访问它，您可以通过这种方式使用从父组件引用子组件。

在父组件中是这样的

<template>
<my-child ref="mychild"> </my-child>
</template>

您可以使用 $v 对象访问 my-child 组件中声明的验证

this.$refs.mychild.$v

然后您可以轻松地在父组件中使用子组件的验证。希望这将使工作变得比使用复杂的方法更容易，并且对我有用。

【参考方案2】：

开始使用 vuelidate 的子组件/表单最简单的方法是使用 provide/inject pair 提供的 Vue.js 依赖注入机制。父组件中创建的$v实例可以与子组件共享。

随着您对其进行更精细的调整，您可以使用Vuelidate data-nesting 并且只将$v 的一个子集传递给您的子组件。这与 Angular 对嵌套表单的处理方式大致相似。它看起来像：

export default 
    data() 
        return 
            form1: 
                nestedA: '',
                nestedB: ''
             /* Remaining fields */
        
    ,
    validations: 
        form1: 
            nestedA: 
                required
            ,
            nestedB: 
                required
            
        ,

        form2: 
            nestedA: 
                required
            ,
            nestedB: 
                required
            
        
    

或者，您可以为每个组件声明$v 的独立实例。在您的情况下，您将有一个给父母，两个给孩子。当您点击提交按钮时，使用$refs 获取子组件的引用并检查子组件内的嵌套表单是否有效。

【讨论】：

嗨！感谢您的回答。我想为每个组件声明 $v 的独立实例。但！我想实现一种机制，以在表单有效与否时自动禁用/启用“提交”按钮。有可能吗？

在这里，当我传递 $v 的子集时，我发现了一个问题。我需要传递 $v 的子集，但也需要传递来自 data() 的表单子集。否则，来自输入的数据不会传递给 $model。我不能在子组件中使用子模型。 @HaHarshalPatil

@Damaris，当你传递$v 的一个子集时，而不是将v-model 绑定到组件道具，你应该直接将它绑定到$v 模型$v.form1.firstName.$model。您将获得模型中每个字段的副本。此外，当您有多个 $v 实例时，您不能真正直接执行此操作。您必须查询子组件，获取它们的 Vuelidate 实例并手动检查以禁用提交按钮。