1

我正在创建一个注册表单，用于验证用户选择的 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) 
      }, ...

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

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

4

1 回答 1

1

两者<b-form-group>和<b-form-input>都有一个调用的道具，如果值有效、无效或未经验证，则state接受该道具。truefalsenull

您需要将此道具（在<b-form-group>和上<b-form-input>）设置为checkAvailability调用的结果。

请注意，invalid-feedbackand valid-feedbackprops 用于<b-form-group>not<b-form-input>

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

于 2019-11-21T17:57:26.743 回答