javascript - 无法让 Bootstrap-vue 表单验证工作

Question

我正在使用 Vue CLI 和 Bootstrap，当页面加载所有输入字段加载为无效时，当前的表单验证有问题。我可以看到为什么会发生这种情况，因为输入字段的类是 is-invalid .我通过在 state prop 为 false 时将 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 on load 来删除错误消息，然后 false 来显示验证错误， true 来显示有效输入。我已经为此苦苦挣扎了好几天，所以如果您想要更多代码让我知道，我们将不胜感激任何有关此设置任何方面的帮助。提交按钮添加一个类 was-validated它确实显示与空输入相关但不验证输入的任何错误消息。

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

Answer 1

您不必只在 :state 中使用三元语句。 Prop -你可以钩:state直接计算属性，这将实现三件事(这类似于 documentation 中显示的内容):

我们可以有两个以上的条件，突破三元语句的限制。

计算属性将动态分析用户输入，确保表单输入的实时验证。

我们的模板代码将更干净，更易读(重要)。

我正在根据您的示例松散地工作，但类似以下内容应该可以解决您的问题:

<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，如果 this.name 则返回 null。没有当前值(示例是新页面加载，或用户清除输入字段，使其变为空白)。

查看此行为的工作 Codesandbox here .

因为输入的 v-model(v-bind:value 和 @change)设置为我们的“name”数据属性，所以输入字段中的每个字符更改都会 react 性地更新我们的数据属性( this.name)。

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

希望这会有所帮助。