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 相关文章推荐
jquery全选checkBox功能实现代码(取消全选功能)
Dec 10 Javascript
ajax+jQuery实现级联显示地址的方法
May 06 Javascript
JS上传组件FileUpload自定义模板的使用方法
May 10 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
jQuery插件Echarts实现的渐变色柱状图
Mar 23 jQuery
node文件上传功能简易实现代码
Jun 16 Javascript
vue做网页开场视频的实例代码
Oct 20 Javascript
vue中$refs的用法及作用详解
Apr 24 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
Apr 09 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 Javascript
用vue 实现手机触屏滑动功能
May 28 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
Aug 18 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
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
php实现贪吃蛇小游戏
2016/07/26 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
2017/04/27 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
Angularjs实现控制器之间通信方式实例总结
2018/03/27 Javascript
详解如何在你的Vue项目配置vux
2018/06/04 Javascript
vue-router history模式下的微信分享小结
2018/07/05 Javascript
js数据类型检测总结
2018/08/05 Javascript
[44:50]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 TNC vs VG
2018/04/02 DOTA
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中random模块生成随机数详解
2016/03/10 Python
Python中的if、else、elif语句用法简明讲解
2016/03/11 Python
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
利用python和百度地图API实现数据地图标注的方法
2019/05/13 Python
python的pstuil模块使用方法总结
2019/07/26 Python
python颜色随机生成器的实例代码
2020/01/10 Python
Python之变量类型和if判断方式
2020/05/05 Python
python palywright库基本使用
2021/01/21 Python
关于前端上传文件全面基础扫盲贴(入门)
2019/08/01 HTML / CSS
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
2014年五一促销活动方案
2014/03/09 职场文书
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
2014年纪委工作总结
2014/12/05 职场文书
安全保证书
2015/01/16 职场文书
团结主题班会
2015/08/13 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
python中requests库+xpath+lxml简单使用
2021/04/29 Python