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

23444-20190420130722414-1004006551.jpg

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. 效果截图

23444-20190420130706129-2134059817.jpg

转载请注明出处: https://blog.givebest.cn/javascript/2019/04/20/vue.js-nuxt.js-use-vee-validate.html

转载于:https://www.cnblogs.com/givebest/p/10740644.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/264184.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python微博自动评论转发_python3 调用新浪微博api实现自动发布评论

新浪微博开放平台提供了丰富的API接口&#xff0c;利用这些接口&#xff0c;开发者能够开发出独具特色的微博应用。但是&#xff0c;大部分接口都需要用户授权给应用&#xff0c;应用利用授权得到的Access Token来调用相应的接口来获取内容。新浪微博的授权机制目前主要有3种应…

Linux中fork()函数详解

参考地址 1.对fork函数的认识&#xff1a; 一个进程&#xff0c;包括代码、数据和分配给进程的资源。fork&#xff08;&#xff09;函数通过系统调用创建一个与原来进程几乎完全相同的进程&#xff0c; 也就是两个进程可以做完全相同的事&#xff0c;但如果初始参数或者传入的变…

类似pyinstaller_Python 打包工具对比,Nuitka vs Pyinstaller

py2exe&#xff0c;Pyinstaller&#xff0c;Cx_freeze&#xff0c;Nuitka都可以完成python打包的任务。Pyinstaller和Nuitka都号称跨平台&#xff0c;但其实顶多只能算是工具本身跨平台&#xff0c;实际体验中不仅打包产生的文件不能跨平台&#xff0c;能否成功打包本身也不确定…

Android学习之PopupWindow

Android的对话框有两种&#xff1a;PopupWindow和AlertDialog。 详细说明如下&#xff1a; AlertDialog是非阻塞式对话框&#xff1a;AlertDialog弹出时&#xff0c;后台还可以做事情&#xff1b; AlertDialog的位置固定&#xff0c;而PopupWindow的位置可以随意&#xff1b; A…

spring整合mybatis接口无法注入问题

在学习Spring完之后简单的了解了MyBatis。然后进行简单的整合&#xff0c;遇到MyBatista接口映射的Bean无法自动注入的问题&#xff1b; 代码异常&#xff1a; 线程“main”org.springframe .bean .factory中的异常。创建名为“UserController”的bean时出错:通过字段“userdao…

LR重新安装的问题

LR的安装&#xff0c;说难不难&#xff0c;说易也不易。在此就把我安装时碰到的问题记录下来&#xff0c;以供大家参考。 第一次安装时&#xff0c;我是成功了的。&#xff08;注意&#xff1a;安装程序的目录不能有中文&#xff0c;当然同时你得有lincense&#xff09; 后来因…

matlab柱状斜线_Matlab小练习:按斜线方向依次赋值矩阵

来自知乎问题&#xff0c;觉得挺有意思&#xff0c;留给学生解答之余&#xff0c;我也做了一番思考&#xff0c;得到三种解法。题目如下&#xff1a;以n80为例&#xff0c;————————————————————一、先要根据确定矩阵的阶数 如果先生成足够大矩阵&#xff0…

Programming C#.Classes and Objects.只读字段

只读字段 当字段声明中含有 readonly 修饰符时&#xff0c;该声明所引入的字段为只读字段。给只读字段的直接赋值只能作为声明的组成部分出现&#xff0c;或在同一类中的实例构造函数或静态构造函数中出现。&#xff08;在这些上下文中&#xff0c;只读字段可以被多次赋值。&am…

会计知识

毛利 等于收入纯利 等于利润 按照&#xff1a;利润&#xff1d;收入-成本-费用 收入&#xff1a;收到的现金、支票、签单金额成本&#xff1a;买材料、酒水、电、工资、等费用&#xff1a;日租金、桌椅、碗、盘子等摊销、税金等等 ------------------------------------------…

2020-12-21

蜂鸣器&#xff08;向导辅助&#xff09; /******************************************************* This program was created by the CodeWizardAVR V3.12 Advanced Automatic Program Generator ?Copyright 1998-2014 Pavel Haiduc, HP InfoTech s.r.l. http://www.hpin…

xgboost 一般多少棵树_大白话人工智能算法-第32节集成学习之通俗理解XGBoost原理和过程...

本节讲解XGBoost的原理~目录1、回顾&#xff1a;1.1 有监督学习中的相关概念1.2 回归树概念1.3 树的优点2、怎么训练模型&#xff1a;2.1 案例引入2.2 XGBoost目标函数求解3、XGBoost中正则项的显式表达4、如何生长一棵新的树&#xff1f;5、xgboost相比原始GBDT的优化&#xf…

C++函数中返回引用和返回值的区别

https://www.cnblogs.com/JMLiu/p/7928425.html转载于:https://www.cnblogs.com/liuw-flexi/p/10745246.html

scala编程第16章学习笔记(1)

List列表的基本操作 head方法获得列表的第一个元素 tail方法获得列表除第一个元素之外的其它元素 isEmpty&#xff1a;判断列表是否为空&#xff0c;空的话返回真 last&#xff1a;获得列表最后一个元素 init&#xff1a;获得除最后一个元素之外的元素 reverse&#xff1a;反转…

struts

Struts是一个基于Sun J2EE平台的MVC框架&#xff0c;主要是采用Servlet和JSP技术来实现的。Struts把Servlet、JSP、自定义标签和信息资源(message resources)整合到一个统一的框架中&#xff0c;开发人员利用其进行开发时不用再自己编码实现全套MVC模式&#xff0c;极大的节省了…

css实现元素在div底部显示

#CSS .1 {position:relative;} .2 {position:absolute;left;0;bottom:0;} #HTML <div class"1"> <div class"2"></div> </div> 不影响其他元素的情况下定位最好...如果 DIV1 里 只有 DIV2 的话 在DIV2 CSS样式里 加一个 margin-to…

css文件修改后没变化 static_Go Web编程使用Go语言创建静态文件服务器

上篇关于Go模板库应用实践的文章最后我们留下一个问题&#xff0c;页面模板是通过 CDN引用的 BootStrap的 css&#xff0c; js文件。到目前位置我们的服务器还无法伺服客户端的静态文件请求把服务器磁盘上的文件响应给客户端。使用和配置过 Nginx服务器的一定知道 Nginx天然支持…

【linux】学习2

鸟哥那本书的第6章 文件权限&#xff1a; ^ ^ ^ ^ ^ ^ ^ 1 2 3 4 5 6 7 文件有 文件所有者、文件所属用户组 的概念如上图. 1. 十个字母表示文件…

IE 8 开发人员工具详解 【转载】

我的体会&#xff0c;IE 8 较之前面的的版本还是有不少改进的。使用体验上好很多&#xff0c;速度也不错。IE 要继续加油&#xff0c; 对于网页开发人员&#xff0c;IE8也提供了一个所谓的开发人员工具&#xff0c;通过F12可以调用出来 关于这套工具的使用细节&#xff0c;我就…

scrollwidth ,clientwidth ,offsetwidth 三者的区别

clientwidth:内容可视区域的宽度 offsetwidth:元素整体宽度 scrollwidth:实际内容的宽度 转载于:https://www.cnblogs.com/cuijin-book/p/10760656.html