vee-validate 按钮验证

Posted 2023-02-23

【中文标题】vee-validate 按钮验证

【英文标题】：vee-validate button validation

【发布时间】：2021-03-08 17:46:17

【问题描述】：

我是 vee-validate 的新手。我想知道如何验证按钮是否被按下。我已经用 ValidationObserver 包装了我的表单，其中的 v-slot 无效。我希望用户被要求选择一个允许用户继续到下一页的按钮。

我正在包装表单的验证观察者代码：

<ValidationObserver v-slot=" invalid ">
 ...some code
</ValidationObserver>

下面的代码是我需要知道如何设置用户从列表中选择按钮所需的验证。

<v-col cols="6" v-for="(opt, index) in options" :key="index">
      <v-btn @click="selectedOption(index)">
         opt.name 
      </v-btn>
</v-col>

在我的表单结束时，我有一个允许用户继续的按钮。在表单完成并且没有验证错误之前，该按钮处于禁用状态。但我也想确保如果客户从列表中选择按钮（上面的代码），它将启用按钮，否则它应该被禁用

<v-btn :disabled="invalid">
Continue
</v-btn>

【参考方案1】：

您的按钮需要支持并应用 v-model 指令，来自 vee-validate 的 validation-provider 尝试查找带有 v-model 的节点/标签并监视它们的更改/更新。

所以你需要在v-btn 和implements v-model support 周围创建一个包装组件。

最终应该是这样的：

<v-col cols="6" v-for="(opt, index) in options" :key="index">
  <ValidationProvider :name="`btn_$index`" >
    <CustomButtonInput v-model="selectedOption">
       opt.name 
    </CustomButtonInput>
  </ValidationProvider>
</v-col>

在某种程度上，它类似于创建 radio 或 checkbox 输入组件，具体取决于您是否允许多选。