如何在nuxt中设置vee-validate全局交互模式？

Question

在基本nuxt设置中，我需要全局设置vee-validate interaction mode和其他设置

Answer 1

您可以创建一个文件/plugins/vee-validate.js，然后在nuxt.config.js中声明它，如下所示：

plugins: [
  '~/plugins/vee-validate',
],

在那里，您可以像这样添加全局设置，例如：

import { ValidationObserver, ValidationProvider, extend, setInteractionMode } from 'vee-validate'
import * as rules from 'vee-validate/dist/rules'

Object.keys(rules).forEach((rule) => {
  extend(rule, rules[rule])
})

extend('password-confirmation', {
  params: ['target'],
  validate(value, { target }) {
    return value === target
  },
  message: "Passwords don't match",
})

extend('password-complexity', {
  getMessage: (field) =>
    `The password must contain at least: 1 uppercase letter, 1 lowercase letter, 1 number, and one special character (E.g. , . _ & ? etc)`,
  validate: (value) => {
    return /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/.test(value)
  },
})

Vue.component('ValidationObserver', ValidationObserver)
Vue.component('ValidationProvider', ValidationProvider)

Answer 2

我就是这么做的-

1. 在我的插件文件夹中创建了一个vee-validate.js文件，如下所示：

import { extend, setInteractionMode } from 'vee-validate'
import {
  required,
} from 'vee-validate/dist/rules'

extend('required', { ...required, message: 'This field is required' })

setInteractionMode('eager')

1. 将其作为插件添加到nuxt.config.js

中

plugins: [
  '~/plugins/vee-validate',
]