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实现的动态添加表单元素input,button等(appendChild)
Nov 24 Javascript
让Firefox支持event对象实现代码
Nov 07 Javascript
jQuery find和children方法使用
Jan 31 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
js事件(Event)知识整理
Oct 11 Javascript
jquery图片放大镜功能的实例代码
Mar 26 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
jquery SweetAlert插件实现响应式提示框
Aug 18 Javascript
JavaScript编程学习技巧汇总
Feb 21 Javascript
AngularJS删除路由中的#符号的方法
Sep 20 Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 Javascript
js tab栏切换代码实例解析
Sep 03 Javascript
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
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
PHP 类相关函数的使用详解
2013/05/10 PHP
PHP 5.3新增魔术方法__invoke概述
2014/07/23 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
javascript 继承实现方法
2009/08/26 Javascript
JavaScript 面向对象的之私有成员和公开成员
2010/05/04 Javascript
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
JavaScript调用ajax获取文本文件内容实现代码
2014/03/28 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
浅析创建javascript对象的方法
2016/05/13 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
2019/09/26 Javascript
JS实现可控制的进度条
2020/03/25 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
python通过urllib2爬网页上种子下载示例
2014/02/24 Python
Python的Tornado框架异步编程入门实例
2015/04/24 Python
python爬虫爬取淘宝商品信息
2018/02/23 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
python生成密码字典的方法
2018/07/06 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
在Python中增加和插入元素的示例
2018/11/01 Python
详解Python用户登录接口的方法
2019/04/17 Python
python lambda表达式在sort函数中的使用详解
2019/08/28 Python
为什么黑客都用python(123个黑客必备的Python工具)
2020/01/31 Python
Python 随机按键模拟2小时
2020/12/30 Python
Ubuntu20.04环境安装tensorflow2的方法步骤
2021/01/29 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
全球速卖通西班牙站:AliExpress西班牙
2017/10/30 全球购物
乡村文明行动实施方案
2014/03/29 职场文书
战友聚会致辞
2015/07/28 职场文书
2019旅游导游工作总结
2019/06/27 职场文书