VeeValidate 的使用场景以及配置详解


Posted in Javascript onJanuary 11, 2019

创建vue项目:

vue init webpack vee

cd ./vee 

npm run dev
 
# or
yarn run dev

安装 VeeValidate

npm install vee-validate --save
# or
yarn add vee-validate --save

本文中使用的 VeeValidate 版本为 2.1.5

在 App.vue 中引入

import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);

例子

第一个测试例子

<template>
 <div class="test1">
 <div>
  <input
  type="text"
  name="nickname"
  v-model="formData.nickname"
  v-validate="'required|min:3|max:10'"
  >
  <p>{{errors.first('nickname')}}</p>
 </div>
 <div>
  <button @click="handleSubmit">Submit</button>
 </div>
 </div>
</template>

<script>
 export default {
 name: "test1",
 data() {
  return {
  formData: {
   nickname: '',
   password: '',
  }
  }
 },
 methods: {
  handleSubmit() {
  this.$validator.validate()
   .then((valid) => {
   if (true === valid) {
    console.log('验证通过');
   } else {
    console.log(this.$validator.errors.all());
   }
   })
  }
 }
 }
</script>

<style scoped lang="css">
 .test1 {
 width: 900px;
 margin: 0 auto;
 }
</style>

更多配置请参考官网!

我们只是用些常用配置和常用的验证!

中文配置

全局配置

import VeeValidate, {Validator} from 'vee-validate';
import zh_CN from 'vee-validate/dist/locale/zh_CN';
Vue.use(VeeValidate, {
 dictionary: {
 zh_CN: zh_CN
 }
});
Validator.localize('zh_CN');

这样就可以使用中文提示了!

自定义错误提示

<template>
 <div class="test2">
 <div><input type="text" v-model="formData.nickname" data-vv-name="nickname" v-validate="'required|min:3|max:10'">
 </div>
 <div>{{errors.first('nickname')}}</div>
 <div><input type="text" v-model="formData.password" data-vv-name="password" v-validate="'required|min:5|max:200'">
 </div>
 <div>{{errors.first('password')}}</div>
 <div>
  <button @click="handleSubmit">Submit</button>
 </div>
 </div>
</template>

<script>
 const validate = {
 custom: {
  nickname: {
  required: () => '昵称不得为空', //写法1
  min: "昵称不得小于3个字符", //写法2
  max: () => '昵称不得大于10个字符'
  },
  password: {
  required: () => '密码不得为空',
  min: "密码不得小于5个字符",
  max: () => '密码不得大于200个字符'
  }
 },
 };

 export default {
 name: "test2",
 data() {
  return {
  formData: {
   nickname: '',
   password: '',
  }
  }
 },
 methods: {
  handleSubmit() {
  this.$validator.validate()
   .then((valid) => {
   if (true === valid) {
    console.log('验证通过');
   } else {
    console.log(this.$validator.errors.all());
   }
   })
  }
 },
 mounted() {
  this.$validator.localize('zh_CN', validate);
 }
 }
</script>

自定义验证规则

<template>
 <div class="test2">
 <div><input type="text" v-model="formData.nickname" data-vv-name="nickname" v-validate="'required|min:3|max:10'">
 </div>
 <div>{{errors.first('nickname')}}</div>
 <div><input type="text" v-model="formData.password" data-vv-name="password" v-validate="'required|min:5|max:200'">
 </div>
 <div>{{errors.first('password')}}</div>
 <div><input type="text" v-model="formData.re_password" data-vv-name="re_password"
    v-validate="'required|confirm'">
 </div>
 <div>{{errors.first('re_password')}}</div>
 <div><input type="text" v-model="formData.mobile" data-vv-name="mobile" v-validate="'required|mobile'">
 </div>
 <div>{{errors.first('mobile')}}</div>
 <div>
  <button @click="handleSubmit">Submit</button>
 </div>
 </div>
</template>

<script>
 const validate = {
 custom: {
  nickname: {
  required: () => '昵称不得为空', //写法1
  min: "昵称不得小于3个字符", //写法2
  max: () => '昵称不得大于10个字符'
  },
  password: {
  required: () => '密码不得为空',
  min: "密码不得小于5个字符",
  max: () => '密码不得大于200个字符'
  },
  re_password: {
  required: () => '请再次输入密码!',
  },
  mobile: {
  required: () => '请输入手机号码!',
  }
 },
 };

 export default {
 name: "test3",
 data() {
  return {
  formData: {
   nickname: '',
   password: '',
   re_password: '',
   mobile: ''
  }
  }
 },
 methods: {
  handleSubmit() {
  this.$validator.validate()
   .then((valid) => {
   if (true === valid) {
    console.log('验证通过');
   } else {
    console.log(this.$validator.errors.all());
   }
   })
  }
 },
 mounted() {
  this.$validator.localize('zh_CN', validate);
  this.$validator.extend('mobile', {
  getMessage: field => '手机号有误',
  validate: value => {
   return /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
  }
  })
  this.$validator.extend('confirm', {
  getMessage: field => '两次密码输入不一致',
  validate: value => {
   return value === this.formData.password
  }
  })
 }
 }
</script>

显示第一个错误!

有时候我们需要在弹出层中提示用户 所以要显示第一个错误

this.$validator.errors.items[0].msg

例子 发验证码和注册!

这个例子中发验证码是一个验证 注册又是一个验证 所以有点意义!

在发送验证码的时候需要验证手机号码和图形验证码 注册的时候需要验证除图形验证码之外的数据

VeeValidate 的使用场景以及配置详解

VeeValidate 的使用场景以及配置详解

template

<template>
 <div class="reg">
 <div class="form_item">
  <div class="input">
  <input
   type="text"
   name="mobile"
   data-vv-name="mobile"
   v-model="mobile"
   v-validate="'required|mobile'"
   placeholder="手机号码"
  >
  </div>
  <div class="err">{{errors.first('mobile')}}</div>
 </div>
 <div class="form_item">
  <div class="input">
  <input
   type="text"
   v-model="img_captcha"
   name="img_captcha"
   placeholder="图形验证码"
   v-validate="'required'"
  >
  </div>
  <div class="err">{{errors.first('img_captcha')}}</div>
 </div>
 <div class="form_item">
  <div class="input send_sms">
  <input
   type="text"
   v-validate="'required|length:6'"
   v-model="sms_captcha"
   name="sms_captcha"
   placeholder="短信验证码"
  >
  <button class="send_sms_btn" @click="handleSendSms">获取验证码</button>
  </div>
  <div class="err">{{errors.first('sms_captcha')}}</div>
 </div>
 <div class="form_item">
  <div class="input">
  <input
   type="text"
   name="password"
   v-validate="'required|min:8'"
   v-model="password"
   placeholder="登录密码"
   ref="password"
  >
  </div>
  <div class="err">{{errors.first('password')}}</div>
 </div>
 <div class="form_item">
  <div class="input">
  <input
   type="text"
   name="re_password"
   v-validate="'required|confirmed:password'"
   v-model="re_password"
   placeholder="再次输入登录密码"
  ></div>
  <div class="err">{{errors.first('re_password')}}</div>
 </div>
 <div class="form_item">
  <div class="input">
  <input
   type="text"
   name="nickname"
   v-validate="'required|min:3|max:10'"
   v-model="nickname"
   placeholder="请输入昵称"
  ></div>
  <div class="err">{{errors.first('nickname')}}</div>
 </div>
 <div class="form_item">
  <div class="input">
  <input
   type="text"
   name="id_card"
   v-validate="'required|id_card'"
   v-model="id_card"
   placeholder="请输入身份证号码"
  ></div>
  <div class="err">{{errors.first('id_card')}}</div>
 </div>
 <div class="form_item">
  <div class="input">
  <input
   type="date"
   name="birthday"
   v-validate="'required|date_format:YYYY-MM-DD'"
   v-model="birthday"
   placeholder="请输入生日"
  ></div>
  <div class="err">{{errors.first('birthday')}}</div>
 </div>
 <div class="form_item">
  <div class="input">
  <input
   type="text"
   name="url"
   v-validate="'required|url'"
   v-model="url"
   placeholder="请输入个人网址"
  ></div>
  <div class="err">{{errors.first('url')}}</div>
 </div>
 <div class="form_item">
  <div class="input">
  <input
   type="text"
   name="email"
   v-validate="'required|email'"
   v-model="email"
   placeholder="请输入电子邮箱"
  ></div>
  <div class="err">{{errors.first('email')}}</div>
 </div>
 <div class="form_item">
  <div class="input">
  <input
   type="text"
   name="age"
   v-validate="'required|between:18,60'"
   v-model="age"
   placeholder="请输入年龄"
  ></div>
  <div class="err">{{errors.first('age')}}</div>
 </div>
 <div class="form_item">
  <button class="reg_btn" @click="handleSubmit">注册</button>
 </div>

 </div>
</template>

style 代码(这个是随便写的 原生css大家不要吐槽哈)

<style>
 .err {
 color: red;
 font-size: 12px;
 text-align: left;
 }

 .reg {
 width: 500px;
 margin: 0 auto;
 }

 .send_sms {
 position: relative;
 }

 .send_sms_btn {
 position: absolute;
 width: 100px;
 height: 30px;
 right: -11px;
 top: 2px;
 cursor: pointer;
 border: none;
 border-radius: 4px;
 background-color: #e4393c;
 outline: none;
 color: #fff;
 }

 .form_item {
 margin-bottom: 10px;
 width: 400px;
 }

 input {
 width: 400px;
 height: 30px;
 border: 1px solid #999;
 border-radius: 4px;
 outline: none;
 padding-left: 10px;
 }

 .reg_btn {
 width: 100px;
 height: 30px;
 border: none;
 border-radius: 4px;
 background-color: #e4393c;
 outline: none;
 cursor: pointer;
 color: #fff;
 }
</style>

js

<script>
 import {messages} from '../validate/reg'

 export default {
 name: "reg",
 data() {
  return {
  url: '',
  age: '',
  email: '',
  birthday: '',
  id_card: '',
  nickname: '',
  mobile: '',
  img_captcha: '',
  sms_captcha: '',
  password: '',
  re_password: '',
  }
 },
 mounted() {
  this.$validator.localize('zh_CN', messages);
  this.$validator.extend('mobile', {
  getMessage: field => '手机号有误',
  validate: value => {
   return /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
  }
  });
  this.$validator.extend('id_card', {
  getMessage: field => '身份证号码格式有误',
  validate: value => {
   return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)
  }
  });
 },
 methods: {
  handleSubmit() {
  this.$validator.errors.clear();
  this.$validator.validateAll({
   mobile: this.mobile,
   password: this.password,
   sms_captcha: this.sms_captcha,
   re_password: this.re_password,
   url: this.url,
   age: this.age,
   email: this.email,
   birthday: this.birthday,
   id_card: this.id_card,
   nickname: this.nickname,
  }).then((valid) => {
   console.log(valid);
   if (true === valid) {
   console.log('验证通过');
   } else {
   console.log(this.$validator.errors.all());
   }
  });
  },
  handleSendSms() {
  this.$validator.errors.clear();
  this.$validator.validateAll({
   mobile: this.mobile,
   img_captcha: this.img_captcha
  }).then((valid) => {
   console.log(valid);
   if (true === valid) {
   console.log('验证通过');
   } else {
   console.log(this.$validator.errors.all());
   }
  });
  }
 }
 }
</script>

外部引入的js (自定义提示内容)

export const messages = {
 custom: {
 mobile: {
  required: () => '请输入手机号码!',
  mobile: () => '手机号码有误',
 },
 img_captcha: {
  required: () => '请输入图形验证码!',
 },
 sms_captcha: {
  required: () => '请输短信验证码!',
  length: () => '短信验证码为6位数字'
 },
 password: {
  required: () => '密码不得为空',
  min: () => '密码不得小于8个字符',
 },
 re_password: {
  required: () => '请再次输入密码!',
  confirmed: () => '两次密码输入不一致'
 },
 nickname: {
  required: () => '请输入昵称',
  min: () => '昵称最小为3位字符',
  max: (field, params) => {
  return `昵称最大为${params[0]}位字符`;
  }
 },
 id_card: {
  required: "身份证号码不得为空"
 },
 birthday: {
  required: "请选择出生日期",
  date_format: "出生日期有误"
 },
 url: {
  required: () => "请输入个人网址",
  url: () => "网址输入有误"
 },
 email: {
  required: () => "请输入电子邮箱",
  email: () => "电子邮箱输入有误"
 },
 age: {
  required: () => "请输入年龄",
  between: () => "年龄必须在18-60岁之间"
 }
 },
};

扩展内容

自定义错误信息中显示配置验证规则中的参数

export const messages = {
 custom: {
 nickname: {
  required: () => "请输入年龄",
  between: (fiield,params) => `年龄必须在${params[0]}-${params[1]}岁之间"
 }
 },
};

规则里面第一个参数是字段名称 第二个参数是验证规则后面的参数;

验证指定字段

validateAll(field Object) 
validateAll({mobile:this.moble});

还可以使用 data-vv-scope 来指定 但是该方法并不适用一些场景;

显示错误信息的时候必须要指定scope的值 不然不会显示错误信息

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript vvorld 在线加密破解方法
Nov 13 Javascript
jquery $.ajax入门应用二
Nov 19 Javascript
javascript call和apply方法
Nov 24 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
Mar 25 Javascript
JS简单实现动画弹出层效果
May 05 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
JavaScript中的this使用详解
Jul 27 Javascript
Google 地图API Map()构造器详解
Aug 06 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
Dec 23 Javascript
js canvas实现擦除效果示例代码
Apr 26 Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
JS函数节流和防抖之间的区分和实现详解
Jan 11 #Javascript
微信公众号H5支付接口调用方法
Jan 10 #Javascript
详解在Node.js中发起HTTP请求的5种方法
Jan 10 #Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 #Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
Jan 10 #Javascript
最简单的JS实现json转csv的方法
Jan 10 #Javascript
puppeteer实现html截图的示例代码
Jan 10 #Javascript
You might like
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
PHP面向对象学习笔记之一 基础概念
2012/10/06 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
JQuery Dialog的内存泄露问题解决方法
2010/06/18 Javascript
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
js charAt的使用示例
2014/02/18 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
分享19个JavaScript 有用的简写写法
2017/07/07 Javascript
十分钟带你快速了解React16新特性
2017/11/10 Javascript
详解webpack + react + react-router 如何实现懒加载
2017/11/20 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
jquery实现购物车基本功能
2019/10/25 jQuery
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
Django的信号机制详解
2017/05/05 Python
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
Python+pandas计算数据相关系数的实例
2018/07/03 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
Python 中的 import 机制之实现远程导入模块
2019/10/29 Python
python读写文件write和flush的实现方式
2020/02/21 Python
Python 实现敏感目录扫描的示例代码
2020/05/21 Python
Python爬虫开发与项目实战
2020/12/16 Python
试解释COMMIT操作和ROLLBACK操作的语义
2014/07/25 面试题
法律专业应届本科毕业生求职信
2013/10/25 职场文书
2014年三八妇女节活动总结
2014/03/01 职场文书
食品安全处置方案
2014/06/14 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
担保书范本
2015/01/20 职场文书
我爱我班主题班会
2015/08/13 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书