如何使用VeeValidate验证BootstrapVue表单的输入?

时间:2019-12-18 11:50:49

标签: vue.js vuejs2 vue-component bootstrap-vue vee-validate

我有一个用BootstrapVue构建的表格。为了验证表单输入,我遇到了VeeValidate。

select输入是较长形式的一部分,当前看起来像这样:

null

我想验证此输入,并在页面加载时显示一个验证错误,以指示用户他需要进行选择输入(“ 1..2..4..6..12”)。 “每年付款”占位符应显示为无效。

在阅读VeeValidate文档时,它说我需要一个单独的组件。示例:

.docx

但是我确实已经在BootstrapVue组件中使用了select输入。我应该怎么从这里继续前进?

我可以以某种方式合并这两个组件吗?

感谢您的见解和帮助!

1 个答案:

答案 0 :(得分:2)

您必须将要验证的每个sysID=$(echo $JSON | tr , '\n' | grep SystemId | awk -F ':' '{print $2}') accID=$(echo $JSON | tr , '\n' | grep AccountId | awk -F ':' '{print $2}') echo "System ID = $sysID, Account ID = $accID" 都包装在_.has(object, 'a'); _.has(object, 'a.b'); 中,就像以下代码所示:

input

(可选)如果以后要使用<ValidationProvider,则必须将其包装在所有<ValidationProvider rules="even" v-slot="{ errors }"> <b-form-select size="sm" v-model="selected" class="mb-2 form-group"> <option :value="null" disabled>Payments per Year</option> <option value="1">1</option> <option value="2">2</option> <option value="4">4</option> <option value="6">6</option> <option value="12">12</option> </b-form-select> <span>{{ errors[0] }}</span> </ValidationProvider> 标签周围。