Vee-validate表单验证在Vue.js Nuxt.js项目中使用

Vee-validate是一个为Vue.js定制的表单验证框架，它允许您验证输入内容并显示相应的错误消息。它内置了许多常用的检查规则，可以组合使用。在大多数情况下，它只能通过配置来使用，并且还支持自定义正则表达式。并且支持40多种语言，对本地化和多语言支持非常友好。

当中国感到饥饿时，团队开源项目Element UI使用vee-validate。

官方网站：https://baianat.github.io/vee-validate/

1.装置

在项目中安装vee-validate

npm安装vee-验证-保存

2.创建vee验证插件

A.创建插件

在Nuxt.js项目的plugins目录中创建veevalidate.js。

B.介绍和配置vee-validate

从“vue”导入vue从“vee-validate/dist/locale/zh _ cn”/导入zhcn引入本地化语言导入VeeValidate。{validator}从“vee-validate”//导入vee-validate//覆盖默认的错误消息提示zhCN.messages.email=()='请输入正确的电子邮件地址' Vue . use(vee validate)//localize validator . localize(' zh _ cn '，zhcn) 3。

介绍刚刚在nuxt.config.js中配置的插件veevalidate.js

/* * *在安装app */plugins :[' @/plugins/vee validate ']之前要加载的插件，4。表单页面实现自定义错误提示和自定义检查规则

html表单

form action=' Van-cell-group Van-field placeholder='请输入有效的邮箱' type=' email ' v-model=' email ' name=' email ' v-validate=' '必需| email ' ' : errors-message=' errors . first(' email ')'/Van-field placeholder='请输入密码' v-model=' password ' type=' password ' name=' password ' v-validate=' { min 3: 3，max: 16，regex: regexps

A.自定义错误消息

//自定义错误消息提示const validate edit={ custom : { email 3360 { required d : '请输入电子邮件地址'，//覆盖电子邮件字段所需的规则默认信息提示email: '请输入有效的电子邮件地址'//覆盖电子邮件字段提示的电子邮件规则默认信息}，password3360 {min: '密码长度为7-26个字符'，//覆盖密码字段的最小规则默认信息指示max: '密码长度为7-26 数字和特殊字符'//regex规则覆盖电子邮件字段的默认信息指示}}} b .默认配置包含在vue中，并使用用户定义的提示信息。

data(){ regex PS : { password : new regexp(')//密码验证自定义正则表达式}，}，created () {this。$ validator.localize ('zh _ cn '，validateedit)}，5。效果截图

摘要

以上是边肖介绍的Vue.js Nuxt.js项目中Vee-validate表单的验证。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！