表单验证

BootstrapVue 默认不包含表单验证；我们将其留给许多现有的表单验证插件。以下是插件的一些示例以及如何集成它们。

Vuelidate

Vuelidate 提供“Vue.js 的简单、轻量级基于模型的验证”。安装说明和其他文档可以在其网站上找到。

Vuelidate 示例

此示例展示了如何向两个表单字段添加不同的验证和反馈，以及根据表单有效性动态禁用提交按钮。

这是一个详细的示例，旨在展示 BootstrapVue 和 Vuelidate 如何交互；在较大的应用程序中，你可能希望抽象出一些功能，例如创建标准错误消息组件。

VeeValidate v2

VeeValidate 是 Vue.js 的一个插件，可用于验证输入字段并显示错误。它完全支持 Vue I18n，并提供相当不错的开箱即用错误消息。

重要

您必须配置 vee-validate 的 fields 属性，否则它将在注入自身时与 :fields 属性（以及其他组件）发生冲突。

import Vue from 'vue'
import VeeValidate from 'vee-validate'

Vue.use(VeeValidate, {
  // This is the default
  inject: true,
  // Important to name this something other than 'fields'
  fieldsBagName: 'veeFields',
  // This is not required but avoids possible naming conflicts
  errorBagName: 'veeErrors'
})

VeeValidate v2 示例

VeeValidate v3