Vuelidate 在点击操作时验证 bootstrapvue / vue 表单字段

Posted

技术标签:

【中文标题】Vuelidate 在点击操作时验证 bootstrapvue / vue 表单字段【英文标题】:Vuelidate validate a bootstrapvue / vue form field on click action 【发布时间】:2020-03-17 12:57:37 【问题描述】:

我正在创建一个注册表单,用于验证用户选择的 login_id 是否在服务器上可用。 此表单位于 bootstrapvue 上。

     <b-form @submit="onSubmit" v-if="show" @reset="onReset" >
      <b-form-group
        id="signupInputGroup0"
        label="Login:"
        label-for="exampleInput0"
        description="Choose a unique login id"
        valid-feedback="Great! Your login id is unique"
        invalid-feedback="Login id already exists. Please pick another login.">
        <b-form-input
          id="signupInput0"
          type="login"
          v-model="form.login"
          required
          placeholder="Enter a unique login id" 
          />
        <b-button variant="success" @click="onCheckAvailability">Check Availability</b-button>
      </b-form-group>
     ...

我现在的问题是关于对 onCheckAvailability 的调用。此函数将调用 API 并将有效状态设置为 LoginId 字段。

我实际上正在考虑 vuelidate 为所有表单字段创建验证。自定义我自己的验证方法调用 isUn​​iqueLogin

   validations:
    form: 
      login: 
        required,
        isUniqueLogin: this.onCheckAvailability(this.login) 
      , ...

在这种情况下,我们如何将此点击验证传递回表单? 我正在寻找一种简洁优雅的方式。 也可以使用其他可以很好地做到这一点的东西。

注意:这不是提交点击。这是一个简单的点击字段验证。 有时,如果我不能很好地理解范例,使用框架可能会很乏味。

【问题讨论】:

&lt;b-form-input&gt; 没有 invalid-feedbackvalid-feedback 的道具。这些道具在&lt;b-form-group&gt; 那是错误的用法。会改正的。另外,我现在正在尝试使用 state prop。非常有帮助@TroyMorehouse 【参考方案1】:

&lt;b-form-group&gt;&lt;b-form-input&gt; 都有一个名为 state 的属性,如果值有效则接受 true,如果值无效则接受 false,如果未验证则接受 null

您需要将此属性(在&lt;b-form-group&gt;&lt;b-form-input&gt; 上)设置为checkAvailability 调用的结果。

请注意,invalid-feedbackvalid-feedback 属性用于 &lt;b-form-group&gt; 而不是 &lt;b-form-input&gt;

见https://bootstrap-vue.js.org/docs/components/form-group

【讨论】:

以上是关于Vuelidate 在点击操作时验证 bootstrapvue / vue 表单字段的主要内容,如果未能解决你的问题,请参考以下文章

为啥 vuelidate 验证器不再对输入更改做出反应?

如何在 vuelidate 中动态设置验证字段

Vuelidate:根据其他复选框使字段可选(也应适用于自定义验证)

Vuelidate:使用子组件验证表单

Vuelidate 未正确验证表单数据

Vuelidate复选框验证