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 相关文章推荐
extjs 为某个事件设置拦截器
Jan 15 Javascript
关于图片的预加载过程中隐藏未知的
Dec 19 Javascript
Jquery:ajax实现翻页无刷新功能代码
Aug 05 Javascript
基于JavaScript怎么实现让歌词滚动播放
Nov 03 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
基于d3.js实现实时刷新的折线图
Aug 03 Javascript
ECMAScript6轮播图实践知识总结
Aug 17 Javascript
js图片切换具体实现代码
Oct 13 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
Nov 03 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
JS图片懒加载技术实现过程解析
Jul 27 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
Yii获取当前url和域名的方法
2015/06/08 PHP
PHP设置进度条的方法
2015/07/08 PHP
PHP读取文件的常见几种方法
2016/11/03 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
js实现上下左右弹框划出效果
2017/03/08 Javascript
VUE中的无限循环代码解析
2017/09/22 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭
2014/07/09 DOTA
Python实现的统计文章单词次数功能示例
2019/07/08 Python
python如何删除文件中重复的字段
2019/07/16 Python
复化梯形求积分实例——用Python进行数值计算
2019/11/20 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
Python 如何实现访问者模式
2020/07/28 Python
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
2017/01/05 HTML / CSS
Araks官网:纽约内衣品牌
2020/10/15 全球购物
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
介绍一下Make? 为什么使用make
2016/07/31 面试题
企业演讲稿范文
2013/12/28 职场文书
物流仓管员工作职责
2014/01/06 职场文书
审计专业自荐信范文
2014/04/21 职场文书
公司承诺书范文
2014/05/19 职场文书
啦啦队口号大全
2014/06/16 职场文书
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
党员教师群众路线个人整改措施
2014/10/28 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
实习单位推荐信
2015/03/27 职场文书
我的收音机情缘
2022/04/05 无线电