验证点击动作时验证bootstrapvue / vue表单字段

我正在创建一个注册表单,以验证用户选择的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 字段。

我实际上是在考虑审核来为所有表单字段创建验证。自定义我自己的验证方法调用 isUniqueLogin

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

在这种情况下,我们如何将这种点击确认传递回表单? 我正在寻找一种简洁而优雅的方法。 也可以使用其他可以做得很好的方法。

注意: 这不是提交点击。单击即可进行简单的字段验证。 有时,如果我不太了解范例,使用框架可能会很乏味。

clerkzy 回答:验证点击动作时验证bootstrapvue / vue表单字段

<b-form-group><b-form-input>都有一个名为state的道具,如果值有效,则接受true,如果值无效,则接受false,或者{{1} }。

您需要将此道具(在null<b-form-group>上)设置为<b-form-input>调用的结果。

请注意,checkAvailabilityinvalid-feedback道具是在valid-feedback而非<b-form-group>上使用的

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

本文链接:https://www.f2er.com/3057204.html

大家都在问