如何解决如何在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)
,
我就是这样做的-
- 在我的插件文件夹中创建一个
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',]
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。