Question

我使用Bootstrap-Vue构建了以下表单，其中应用了一些Vuelidation代码。

<b-form @submit.prevent="onSubmit">
      <input type="hidden" name="_token" :value="csrf" />
      <transition-group name="fade">
        <b-form-select
          :class="{ 'hasError': $v.form.dobDate.$error }"
          class="mb-3"
          name="dobDate"
          id="dobDate"
          v-model.lazy="$v.form.dobDate.$model"
          :options="optionsDays"
          v-if="isSixteen"
          key="dobDateSelect"
        >
          <template slot="first">
            <option value disabled>Please select a date</option>
          </template>
        </b-form-select>
      </transition-group>
      <transition-group name="fade">
        <b-form-select
          :class="{ 'hasError': $v.form.dobMonth.$error }"
          class="mb-3"
          name="dobMonth"
          id="dobMonth"
          v-model.lazy="$v.form.dobMonth.$model"
          :options="optionsMonths"
          v-if="isSixteen"
          value="optionsMonths.key"
          key="dobMonthSelect"
        >
          <template slot="first">
            <option value disabled>Please select a Month</option>
          </template>
        </b-form-select>
      </transition-group>

      <b-alert
        show
        variant="danger"
        class="error"
        v-if="!$v.form.dobYear.required"
      >This field is required</b-alert>

      <b-alert
        show
        variant="danger"
        class="error"
        v-if="!$v.form.dobYear.minLength"
      >Field must have at least {{ $v.form.dobYear.$params.minLength.min }} characters.</b-alert>

      <b-alert class="error" v-if="!$v.form.dobYear.numeric">Please enter a valid year of birth</b-alert>

      <b-alert show variant="danger" v-if="belowSixteen">You are underage</b-alert>

      <b-form-input
        :class="{ 'hasError': $v.form.dobYear.$error }"
        placeholder="Year of Birth"
        v-model="form.dobYear"
        @blur="$v.form.dobYear.$touch()"
        autofocus
        class="form-control mb-3"
        name="year"
        id="year"
        maxlength="4"
        @keyup="checkAge"
      ></b-form-input>

      <b-button
        class="btn btn-lg btn-primary btn-block"
        type="submit"
        variant="primary"
        :disabled="$v.$invalid||belowSixteen"
      >Submit</b-button>
      <b-alert
        show
        variant="danger"
        v-if="belowSixteen"
        class="error mt-3"
      >Sorry you have to be over 16 to play</b-alert>
    </b-form>

但是目前，我在页面加载时收到即时反馈，这可能会给用户带来不便。相反，我希望用户完成输入/选择后显示错误。

我尝试使用@blur =“ $ v.form.dobYear。$ touch（）”，但它似乎根本不起作用。我在做什么错了？

以下是我的验证当前在脚本中的样子的一个摘要：

validations: {
    form: {
      dobYear: {
        required,
        minLength: minLength(4),
        maxLength: maxLength(4),
        numeric
      },
      dobMonth: {
        required: requiredIf(function() {
          return this.isSixteen;
        })
      },
      dobDate: {
        required: requiredIf(function() {
          return this.isSixteen;
        })
      }
    }
  }

Answer 1

在$touch()事件中调用blur是正确的。但是，您可以对bootstrap-vue提供的state属性使用一些不同的逻辑。您可以在这里Form input [contextual states]

中找到更多详细信息

例如：

<b-form-input
  v-model="form.name"
  type="text"
  @blur="$v.form.name.$touch()"
  :state="$v.form.name.$dirty ? !$v.form.name.$anyError : null"
/>
<b-form-invalid-feedback :state="$v.form.name.$dirty ? !$v.form.name.$anyError : null" >
  Some kind of invalid feedback Message here
</b-form-invalid-feedback>

出于好奇，为什么将v-model用于如下所示的验证模型。

v-model.lazy="$v.form.dobMonth.$model"

将v-model与data()一起使用，如下所示，这还可以吗？

v-model.lazy="form.dobMonth"

Answer 2

您可以按如下方式包装它：

<div v-if="$v.email.$dirty"> 
<b-alert
    show
    variant="danger"
    class="error"
    v-if="!$v.form.dobYear.required"
>This field is required</b-alert>

<b-alert
    show
    variant="danger"
    class="error"
    v-if="!$v.form.dobYear.minLength"
>Field must have at least {{ $v.form.dobYear.$params.minLength.min }} characters.</b-alert>

<b-alert class="error" v-if="!$v.form.dobYear.numeric">Please enter a valid year of birth</b-alert>

<b-alert show variant="danger" v-if="belowSixteen">You are underage</b-alert></div>

Know more

仅当用户完成输入后如何使用Vuelidate显示错误

2 个答案: