vee-validate vue 2.0自定义表单验证的实例


Posted in Javascript onAugust 28, 2018

亲测可用

学习vee-validate,首先可以去阅读官方文档,更为详细可以阅读官网中的规则

一、安装

您可以通过npm或通过CDN安装此插件。

1. NPM

npm install vee-validate --save

2. CDN

<script src="path/to/vue.js"></script>
<script src="path/to/vee-validate.js"></script>
<script>
 Vue.use(VeeValidate); // good to go.
</script>

或者你可以使用ES6导入它:

import Vue from 'vue';
import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);

二、使用中文提示

没有配置过的错误提示默认使用英文显示的,如果想要用中文显示需要我们手动配置一下,首先还是在main.js中引入

import VeeValidate, {Validator} from 'vee-validate';
import cn from 'vee-validate/dist/locale/zh_CN';

Validator.localize('cn', cn);

三、修改默认的错误提示信息

// 修改默认错误提示
const dict = {
 cn: {messages: {required: (name) => `${name}不能为空!`}} // name接受alias的值.
}
Validator.localize(dict);

demo中修改了required的错误提示信息,因为使用的中文(前面引入的),所以是cn。最后用localize方法加入到Validator中。

四、使用自定义规则

Validator.extend('mobile', {
 getMessage: field => "请输入正确的手机号码",
 validate: value => value.length === 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
});

extend的第一个参数就是自定义的规则的名字,可以像使用默认规则一样使用它,getMessage中是错误提示信息,validate是验证规则,返回一个布尔值或promise.

完整例子

<template>
 <div class="">
 <form @submit.prevent="applyCoupon" class="">
  <label class="">手机号</label>
  <p class="">
  <input v-model="phone" name="phone" :class="" type="text"
    placeholder="请输入手机号"><br>
  <span v-show="errors.has('phone')" class="error">{{ errors.first('phone') }}</span>
  </p>
  <label class="">姓名</label>
  <p class="">
  <input v-model="name" name="name" :class="" type="text"
    placeholder="请输入手机号"><br>
  <span v-show="errors.has('name')" class="error">{{ errors.first('name') }}</span>
  </p>

  <p class="">
  <button type="submit" class="" name="button">确定</button>
  </p>
 </form>
 </div>
</template>
<script>
 import VeeValidate, {Validator} from 'vee-validate';
 import cn from 'vee-validate/dist/locale/zh_CN';

 Validator.localize('cn', cn);

 const dict = {
 cn: {messages: {required: (name) => `${name}不能为空!`}}
 }
 Validator.localize(dict);

 export default {
 name: 'coupon-example',
 validator: null,
 data: () => ({
  phone: '',
  name: '',
  errors: null
 }),
 computed: {},
 methods: {
  applyCoupon() { // 提交执行函数
  this.validator.validate('name', this.name).then((result) => this.discounted = result);
  this.validator.validate('phone', this.phone).then((result) => this.discounted = result);
  }
 },
 created() {
  this.validator = new Validator({});

  Validator.extend('mobile', {
  getMessage: field => "请输入正确的手机号码",
  validate: value => value.length === 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
  });
  Validator.extend('name', {
  getMessage: field => "请输入正确姓名",
  validate: value => value == 'tom'
  });

  this.validator.attach({name: 'name', rules: 'required|name', alias: '姓名'});
  this.validator.attach({name: 'phone', rules: 'required|mobile', alias: '手机'});
  // 使用attach以FieldOptions作为其第一个参数的方法添加验证规则。

  this.$set(this, 'errors', this.validator.errors);
 }
 };
</script>
<style>
 .error {
 font-size: 12px;
 color: #ff1c13;
 }
</style>

以上这篇vee-validate vue 2.0自定义表单验证的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习YUI.Ext 第七天--关于View&amp;JSONView
Mar 10 Javascript
jQuery操作input值的各种方法总结
Nov 21 Javascript
JavaScript数字和字符串转换示例
Mar 26 Javascript
Jquery动态添加输入框的方法
May 29 Javascript
javascript实现的闭包简单实例
Jul 17 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 Javascript
javascript自定义事件功能与用法实例分析
Nov 08 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
vue实现井字棋游戏
Sep 29 Javascript
uniapp实现可滑动选项卡
Oct 21 Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 #Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 #jQuery
对Vue table 动态表格td可编辑的方法详解
Aug 28 #Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 #Javascript
layui实现文件或图片上传记录
Aug 28 #Javascript
利用vue.js把静态json绑定bootstrap的table方法
Aug 28 #Javascript
react native 获取地理位置的方法示例
Aug 28 #Javascript
You might like
example2.php
2006/10/09 PHP
php实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
javascript 原型模式实现OOP的再研究
2009/04/09 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
2011/12/12 Javascript
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
express文件上传中间件Multer详解
2016/10/24 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
面试常见的js算法题
2017/03/23 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
详解vue 组件
2020/06/11 Javascript
py中的目录与文件判别代码
2008/07/16 Python
详细介绍Python中的偏函数
2015/04/27 Python
Python 爬虫多线程详解及实例代码
2016/10/08 Python
go和python变量赋值遇到的一个问题
2017/08/31 Python
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
2018/04/30 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
使用python创建Excel工作簿及工作表过程图解
2020/05/27 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
网页美工求职信
2014/02/15 职场文书
早会主持词
2014/03/17 职场文书
三好生演讲稿
2014/09/12 职场文书
销售业务员岗位职责
2015/02/13 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
趣味运动会广播稿
2015/08/19 职场文书
2019年教师入党申请书
2019/06/27 职场文书
vscode中使用npm安装babel的方法
2021/08/02 Javascript
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android