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

Posted 2023-02-22

【中文标题】无法让 Bootstrap-vue 表单验证工作

【英文标题】：Can't get Bootstrap-vue form validation working

【发布时间】：2020-10-03 16:47:26

【问题描述】：

我正在使用 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 类，它会显示与空输入相关但不验证输入的任何错误消息。

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

【参考方案1】：

您不必只在 :state 属性中使用三元语句 - 您可以将 :state 直接连接到计算属性，这将实现三件事（这类似于 @ 中显示的内容） 987654321@):

我们可以有两个以上的条件，突破三元语句的限制。 计算属性将动态分析用户输入，确保表单输入的实时验证。 我们的模板代码将更简洁、更易读（重要）。

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

<template>
  <div id="app">
    <img  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 没有当前值（例如新页面加载，或用户清除输入字段，使其变为空白）。

查看此行为的工作代码框here。

由于输入的 v-model（v-bind:value 和 @change）设置为我们的“名称”数据属性，输入字段中的每个字符更改都会响应式更新我们的数据属性 (this.name)。

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

希望对您有所帮助。

【讨论】：

感谢您的帮助，我应该能够解决这个问题，但我是 vue.js 和 bootstrap 的新手。我感谢您的帮助。我在引导文档的错误页面上。