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 ajax提交表单数据的两种方式
Nov 24 Javascript
js各种验证文本框输入格式(正则表达式)
Oct 22 Javascript
jquery入门—访问DOM对象方法
Jan 07 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
Css3制作变形与动画效果
Jul 24 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
js提交form表单,并传递参数的实现方法
May 25 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
详解使用WebPack搭建React开发环境
Aug 06 Javascript
给原生html中添加水印遮罩层的实现示例
Apr 02 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
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
PHP中比较时间大小实例
2014/08/21 PHP
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
详解PHP数组赋值方法
2015/11/07 PHP
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
2012/02/17 Javascript
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
javascript模拟post提交隐藏地址栏的参数
2014/09/03 Javascript
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
Nginx上传文件全部缓存解决方案
2015/08/17 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
jQuery实现鼠标滑过图片移动特效
2016/12/08 Javascript
利用Javascript获取选择文本所在的句子详解
2017/12/03 Javascript
详解Vue单元测试case写法
2018/05/24 Javascript
详解vue 路由跳转四种方式 (带参数)
2019/04/28 Javascript
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
[03:18]DOTA2放量测试专访820:希望玩家加入国服大家庭
2013/08/25 DOTA
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python实现2048小游戏
2015/03/30 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
加热夹克:RAVEAN
2018/10/19 全球购物
端午节活动策划方案
2014/03/09 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
就业证明函
2015/06/17 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
高中体育课教学反思
2016/02/16 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers