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

问题描述

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

解决方法

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

,

我就是这样做的-

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')

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

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