Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验


Posted in Javascript onApril 22, 2019

Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验

vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息。它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开箱即用,还支持自定义正则表达式。而且支持 40 多种语言,对本地化、多语言支持非常友好。

国内饿了么团队开源项目 Element UI 就用到了 vee-validate 。

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

1. 安装

安装 vee-validate 到项目中

npm install vee-validate --save

2. 创建 vee-validate 插件

a. 创建插件

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

b. 引入、配置 vee-validate

import Vue from 'vue'
import zhCN from 'vee-validate/dist/locale/zh_CN' // 引入本地化语言
import VeeValidate, { Validator } from 'vee-validate' // 引入 vee-validate
// 覆盖默认错误信息提示
zhCN.messages.email = () => '请输入正确的邮箱地址'
Vue.use(VeeValidate)
// 本地化
Validator.localize('zh_CN', zhCN)

3. 引入 vee-validate 到项目中

在 nuxt.config.js 中引入刚才配置好的插件 veevalidate.js

/*
** Plugins to load before mounting the App
*/
plugins: [
  '@/plugins/veevalidate'
],

4. 表单页实现自定义错误提示、自定义检验规则

HTML 表单

<form action="">
 <van-cell-group>
  <van-field placeholder="请输入有效邮箱" type="email" v-model="email" name="email"
   v-validate="'required|email'" :error-message="errors.first('email')" />
  <van-field placeholder="请输入密码" v-model="password" type="password" name="password"
   v-validate="{ min: 3, max: 16, regex: regexps.password }" :error-message="errors.first('password')">
  </van-field>
 </van-cell-group>
</form>

JS

a. 自定义错误提示信息

// 自定义错误信息提示
const validateDict = {
 custom: {
  email: {
   required: '请输入电子邮箱', // 覆盖 email 字段的 required 规则默认信息提示
   email: '请输入有效的电子邮箱地址' // 覆盖 email 字段的 email 规则默认信息提示
  },
  password: {
   min: '密码长度在7-26个字符', // 覆盖 password 字段的 min 规则默认信息提示
   max: '密码长度在7-26个字符', // 覆盖 password 字段的 max 规则默认信息提示
   regex: '需包含大写字母、小写字母、数字、特殊字符中任意三项' // 覆盖 email 字段的 regex 规则默认信息提示
  }
 }
}

b. Vue 中覆盖默认配置,使用自定义提示信息

data () {
 regexps: {
  password: new RegExp('') // 密码检验自定义正则表达式
 },
},
created() {
 this.$validator.localize('zh_CN', validateDict)
},

5. 效果截图

Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验

总结

以上所述是小编给大家介绍的Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Javascript的常规数组和关联数组对比小结
May 24 Javascript
window.addEventListener来解决让一个js事件执行多个函数
Dec 26 Javascript
javascript函数作用域学习示例(js作用域)
Jan 13 Javascript
JS中prototype的用法实例分析
Mar 19 Javascript
js实现Select头像选择实时预览代码
Aug 17 Javascript
Vue中添加手机验证码组件功能操作方法
Dec 07 Javascript
微信小程序switch开关选择器使用详解
Jan 31 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
微信小程序缓存支持二次开发封装实现解析
Dec 16 Javascript
javascript事件循环event loop的简单模型解释与应用分析
Mar 14 Javascript
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
vue 项目build错误异常的解决方法
Apr 22 #Javascript
js实现web调用摄像头 js截取视频画面
Apr 21 #Javascript
今天,小程序正式支持 SVG
Apr 20 #Javascript
详解Vue中组件的缓存
Apr 20 #Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 #Javascript
优雅地使用loading(推荐)
Apr 20 #Javascript
详解JavaScript的数据类型以及数据类型的转换
Apr 20 #Javascript
You might like
一篇不错的PHP基础学习笔记
2007/03/18 PHP
PHP编程中字符串处理的5个技巧小结
2007/11/13 PHP
在PHP中养成7个面向对象的好习惯
2010/01/28 PHP
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
layui文件上传实现代码
2017/05/20 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
vue中keep-alive,include的缓存问题
2019/11/26 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
Python yield使用方法示例
2013/12/04 Python
Python中list列表的一些进阶使用方法介绍
2015/08/15 Python
Python文件操作之合并文本文件内容示例代码
2017/09/19 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
Python 中使用 PyMySQL模块操作数据库的方法
2019/11/10 Python
python 实现二维列表转置
2019/12/02 Python
flask 使用 flask_apscheduler 做定时循环任务的实现
2019/12/10 Python
在pytorch中动态调整优化器的学习率方式
2020/06/24 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
Python lxml库的简单介绍及基本使用讲解
2020/12/22 Python
您的健身减肥和健康饮食专家:vitafy
2017/06/06 全球购物
小学运动会表扬稿
2014/01/19 职场文书
小学英语教学反思案例
2014/02/04 职场文书
工程专业求职自荐书范文
2014/02/08 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
经典安踏广告词
2014/03/21 职场文书
共产党员承诺书
2014/03/25 职场文书
幼儿园运动会口号
2014/06/07 职场文书
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
董事长新年致辞
2015/07/29 职场文书
小学班主任教育随笔
2015/08/15 职场文书
大学生社会服务心得体会
2016/01/22 职场文书
Django分页器的用法你都了解吗
2021/05/26 Python
Python实现生活常识解答机器人
2021/06/28 Python