我正在使用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
类,该类的确显示与空输入关联的任何错误消息,但不验证输入。
问题我如何验证输入,同时仍将表单错误消息隐藏在加载状态。
[您不必只在:state
道具中使用三元语句-您可以直接将: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模型(v-bind:value和@change)设置为我们的“名称”数据属性,所以输入字段中的每个字符更改都会以反应方式更新我们的数据属性(this.name
。
由于我们的isNameStateValid
计算属性具有this.name
依赖性,它将重新评估this.name
数据属性的每次更改-确保使用BootstrapVue的验证状态进行实时验证。
希望有帮助。