我正在使用 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
它确实显示与空输入相关但不验证输入的任何错误消息。问题
如何验证输入,同时仍然在加载时隐藏表单错误消息。
最佳答案
您不必只在 :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 的验证状态进行实时验证。希望这会有所帮助。
关于javascript - 无法让 Bootstrap-vue 表单验证工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62368478/