无法使Bootstrap-vue表单验证正常工作

Question

我正在使用Vue CLI和Bootstrap，并且当页面加载所有输入字段时，当前表单验证存在问题，加载为无效。我可以看到为什么会这样，因为输入字段得到的是is-invalid类。我已通过在状态prop为false时将状态prop传递为null的值来解决此问题。似乎默认行为不应是在页面加载时运行验证，但也许是。我相信我按照bootstrap-vue文档的要求正确设置了结构和适当的类。

我的代码

<b-form
            @submit.prevent="addReview"
            name="review-form"
            class="needs-validation"
            novalidate
          >
            <div class="name">
              <label class="sr-only" for="form-input-name">Name</label>
              <b-input
                id="form-input-name"
                class="form-inputs mb-2 mr-sm-2 mb-sm-0"
                v-model="name"
                placeholder="Name"
                required
                :state="isEmpty(this.name) ? true : null" <---- My problem is here
              ></b-input>
              ...
          </b-form>

我的问题是，我需要三元组的3个结果，这显然是不可能的。我需要在加载时为null才能删除错误消息，然后为false则显示验证错误，并为true则显示有效输入。我已经为此苦苦挣扎了好几天，因此，如果您想让更多的代码让我知道，那么对于此设置任何方面的帮助将不胜感激。提交按钮添加了一个was-validated类，该类的确显示与空输入关联的任何错误消息，但不验证输入。

问题我如何验证输入，同时仍将表单错误消息隐藏在加载状态。

Answer 1

[您不必只在:state道具中使用三元语句-您可以直接将:state挂钩到计算属性，这将实现三件事（这类似于documentation中显示的内容]）：

1. 我们可以有两个以上的条件，突破了三元声明的限制。
2. [calculated属性将动态分析用户输入，以确保表单输入的实时验证。
3. 我们的模板代码将更简洁，更易读（重要）。

我正在从您的示例中轻松地工作，但是类似以下的内容应该可以解决您的问题：

<template>
  <div id="app">
    <img width="25%" src="./assets/logo.png" style="margin-bottom: 15px;">
    <b-form>
      <div class="name">
        <label class="sr-only" for="form-input- name">Name</label>
        <b-input v-model="name" id="form-input-name" :state="isNameStateValid"></b-input>
      </div>
    </b-form>
  </div>
</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        name: ""
      };
    },
    methods: {
      isValid() {
        return this.name.length > 3 ? true : false; //your validation criteria goes here
      }
    },
    computed: {
      isNameStateValid() {
        if (this.name) {
          return this.isValid(this.name);
        }
        return null;
      }
    }
  };
</script>

在上面，您将拥有一种检查特定验证条件（isValid，isEmpty等）的方法。

我们新的计算属性isNameStateEmpty将使用该方法，并基于其返回值，对于验证失败（触发BootstrapVue的失败验证状态）将返回false，对于验证通过将返回true，或者在验证通过时返回null。名称没有当前值（例如，正在刷新页面，或者用户清除了输入字段，使其为空白）。

请参阅此行为的有效Codesandbox here。

由于输入的v模型（v-bind：value和@change）设置为我们的“名称”数据属性，因此输入字段中的每个字符更改都会以反应方式更新我们的data属性。

因为我们的isNameStateValid计算属性具有this.name的依赖关系，它将对this.name数据属性的每次更改重新进行评估-确保使用BootstrapVue的验证状态进行实时验证。

希望有帮助。