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 相关文章推荐
COM中获取JavaScript数组大小的代码
Nov 22 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
Apr 11 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
JS在可编辑的div中的光标位置插入内容的方法
Nov 20 Javascript
director.js实现前端路由使用实例
Feb 03 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
JavaScript中this的四个绑定规则总结
Sep 26 Javascript
node.js入门学习之url模块
Feb 25 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
在react-router4中进行代码拆分的方法(基于webpack)
Mar 08 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
Nov 05 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
php+jQuery递归调用POST循环请求示例
2016/10/14 PHP
Yii2 队列 shmilyzxt/yii2-queue 简单概述
2017/08/02 PHP
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
Angular4 中常用的指令入门总结
2017/06/12 Javascript
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
vue 弹出遮罩层样式实例
2020/07/22 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
在Python中操作日期和时间之gmtime()方法的使用
2015/05/22 Python
Python中操作文件之write()方法的使用教程
2015/05/25 Python
python利用datetime模块计算时间差
2015/08/04 Python
Python制作爬虫抓取美女图
2016/01/20 Python
tensorflow学习笔记之mnist的卷积神经网络实例
2018/04/15 Python
python实现点对点聊天程序
2018/07/28 Python
Python实现账号密码输错三次即锁定功能简单示例
2019/03/29 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
python过滤中英文标点符号的实例代码
2019/07/15 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
python如何编写win程序
2020/06/08 Python
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
2016/03/22 HTML / CSS
授权委托书样本
2014/04/03 职场文书
学雷锋的心得体会
2014/09/04 职场文书
科学发展观标语
2014/10/08 职场文书
三好学生个人总结
2015/02/15 职场文书
承诺书模板大全
2015/05/04 职场文书
环保建议书作文500字
2015/09/14 职场文书
Python使用openpyxl批量处理数据
2021/06/23 Python
SpringRetry重试框架的具体使用
2021/07/25 Java/Android
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏
Oracle用户管理及赋权
2022/04/24 Oracle
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android