如何使用 VeeValidate 验证来自 BootstrapVue 表单的输入?
How to validate input from BootstrapVue form with VeeValidate?
我有一个使用 BootstrapVue 构建的表单。为了验证表单输入,我遇到了 VeeValidate。
select 输入是较长表单的一部分,目前看起来像这样:
<form action="">
...
<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>
...
</form>
我想验证此输入并在页面加载时显示验证错误,以向用户表明他需要进行 select 输入(“1..2..4..6. .12”)。 "Payments per Year" 占位符应显示为无效。
在阅读 VeeValidate 文档时,它说我需要一个单独的组件。示例:
<ValidationProvider rules="even" v-slot="{ errors }">
<input v-model="value" type="number" placeholder="type something">
<span>{{ errors[0] }}</span>
</ValidationProvider>
但我已经在 BootstrapVue 组件中使用了 select 输入。我应该如何从这里继续前进?
我能以某种方式合并这两个组件吗?
感谢您的见解和帮助!
您必须将要验证的每个 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>
如果您想稍后使用 <ValidationObserver>
,您可以选择将其包裹在所有 <ValidationProvider>
标签周围。
我有一个使用 BootstrapVue 构建的表单。为了验证表单输入,我遇到了 VeeValidate。
select 输入是较长表单的一部分,目前看起来像这样:
<form action="">
...
<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>
...
</form>
我想验证此输入并在页面加载时显示验证错误,以向用户表明他需要进行 select 输入(“1..2..4..6. .12”)。 "Payments per Year" 占位符应显示为无效。
在阅读 VeeValidate 文档时,它说我需要一个单独的组件。示例:
<ValidationProvider rules="even" v-slot="{ errors }">
<input v-model="value" type="number" placeholder="type something">
<span>{{ errors[0] }}</span>
</ValidationProvider>
但我已经在 BootstrapVue 组件中使用了 select 输入。我应该如何从这里继续前进?
我能以某种方式合并这两个组件吗?
感谢您的见解和帮助!
您必须将要验证的每个 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>
如果您想稍后使用 <ValidationObserver>
,您可以选择将其包裹在所有 <ValidationProvider>
标签周围。