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 相关文章推荐
javascript suggest效果 自动完成实现代码分享
Feb 17 Javascript
用IE重起计算机或者关机的示例代码
Mar 10 Javascript
js的Prototype属性解释及常用方法
May 08 Javascript
Javascript实现获取及设置光标位置的方法
Jul 21 Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 Javascript
jQuery模拟下拉框选择对应菜单的内容
Mar 07 Javascript
JavaScript实现实时更新系统时间的实例代码
Apr 04 Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
教你搭建按需加载的Vue组件库(小结)
Jul 29 Javascript
vuex(vue状态管理)的特殊应用案例分享
Mar 03 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 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
thinkphp连贯操作实例分析
2014/11/22 PHP
php实现产品加入购物车功能(1)
2020/07/23 PHP
js arguments.callee的应用代码
2009/05/07 Javascript
javascript中的变量作用域以及变量提升详细介绍
2013/10/24 Javascript
js中replace的用法总结
2013/12/27 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
jQuery实现360°全景拖动展示
2015/03/18 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
2016/02/17 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
Nuxt的路由配置和参数传递方式
2020/11/06 Javascript
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
[34:27]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第一局
2016/02/26 DOTA
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
Python 实现在文件中的每一行添加一个逗号
2018/04/29 Python
解决Django layui {{}}冲突的问题
2019/08/29 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
灵泰克Java笔试题
2016/01/09 面试题
优秀护士获奖感言
2014/02/20 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
基层组织建设年活动总结
2015/05/09 职场文书
国庆节新闻稿
2015/07/17 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
MySql子查询IN的执行和优化的实现
2021/08/02 MySQL
使用Bandicam录制鼠标指针并附带点击声音,还可以添加点击动画效果
2022/04/11 数码科技