VeeValidate 类名中的多个 css 类

Question

是否可以在 VeeValidate 中设置多个 classes（选项 classNames）？

我正在使用 VeeValidate for Vue.js 进行表单验证。有以下选项： 'classes: true, classNames: valid and invalid css class.'

我想使用 bootstrap 'alert alert-warning'。但是，当我在下面添加 class 个名称时，我收到以下错误消息：

Uncaught (in promise) DOMException: Failed to execute 'remove' on 'DOMTokenList': The token provided ('alert alert-warning') contains HTML space characters, which are not valid in tokens.

除了创建新的 css class 之外，这种情况是否有解决方法？

代码：

Vue.use(VeeValidate, {
classes: true,
classNames: {
    valid: '',
    invalid: 'alert alert-warning'
}});

Answer 1

根据 source code 可以传递类的数组。试试这个：

Vue.use(VeeValidate, {
  classes: true,
  classNames: {
    valid: '',
    invalid: ['alert', 'alert-warning']
  }
});

VeeValidate 类名中的多个 css 类

Multiple css classes in VeeValidate classNames

javascript

css

vue.js

vee-validate