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 相关文章推荐
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
javascript字母大小写转换的4个函数详解
May 09 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
每天一篇javascript学习小结(Function对象)
Nov 16 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 Javascript
解决vue热替换失效的根本原因
Sep 19 Javascript
javascript实现考勤日历功能
Nov 29 Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
JavaScript多种图形实现代码实例
Jun 28 Javascript
在vue中使用echarts(折线图的demo,markline用法)
Jul 20 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高级编程-函数-郑阿奇
2011/07/04 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
Js 本页面传值实现代码
2009/05/17 Javascript
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
JS实现3D图片旋转展示效果代码
2015/09/22 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
2017/07/04 Javascript
使用ECharts实现状态区间图
2018/10/25 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
2020/08/04 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
JS如何操作DOM基于表格动态展示数据
2020/10/15 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
python实现下载整个ftp目录的方法
2017/01/17 Python
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
Django 2.0版本的新特性抢先看!
2018/01/05 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
Python序列化pickle模块使用详解
2020/03/05 Python
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
创建市级文明单位实施方案
2014/03/01 职场文书
爽歪歪广告词
2014/03/20 职场文书
活动总结报告范文
2014/05/04 职场文书
预备党员转正考核材料
2014/06/03 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
公务员个人考察材料
2014/12/23 职场文书
答谢酒会主持词
2015/07/02 职场文书
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android