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 为所有表单字段创建验证。自定义我自己的验证方法调用 isUniqueLogin
validations:
form:
login:
required,
isUniqueLogin: this.onCheckAvailability(this.login)
, ...
在这种情况下,我们如何将此点击验证传递回表单? 我正在寻找一种简洁优雅的方式。 也可以使用其他可以很好地做到这一点的东西。
注意:这不是提交点击。这是一个简单的点击字段验证。 有时,如果我不能很好地理解范例,使用框架可能会很乏味。
【问题讨论】:
<b-form-input>
没有 invalid-feedback
或 valid-feedback
的道具。这些道具在<b-form-group>
那是错误的用法。会改正的。另外,我现在正在尝试使用 state prop。非常有帮助@TroyMorehouse
【参考方案1】:
<b-form-group>
和 <b-form-input>
都有一个名为 state
的属性,如果值有效则接受 true
,如果值无效则接受 false
,如果未验证则接受 null
。
您需要将此属性(在<b-form-group>
和<b-form-input>
上)设置为checkAvailability
调用的结果。
请注意,invalid-feedback
和 valid-feedback
属性用于 <b-form-group>
而不是 <b-form-input>
见https://bootstrap-vue.js.org/docs/components/form-group
【讨论】:
以上是关于Vuelidate 在点击操作时验证 bootstrapvue / vue 表单字段的主要内容,如果未能解决你的问题,请参考以下文章