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

【问题标题】：How to set the vee-validate global interaction mode in nuxt?nuxt中如何设置vee-validate全局交互模式？
【发布时间】：2020-11-03 05:26:27
【问题描述】：

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

【问题讨论】：

标签： nuxt.js vee-validate

【解决方案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')

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

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

【讨论】：

【解决方案2】：

您可以创建一个文件/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)

【讨论】：