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 getElementsByClassName实现代码
Oct 11 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
Apr 02 Javascript
浅谈类似于(function(){}).call()的js语句
Mar 30 Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 Javascript
javascript中setInterval的用法
Jul 19 Javascript
AngularJS的一些基本样式初窥
Jul 27 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
Dec 02 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
基于JavaScript实现淘宝商品广告效果
Aug 10 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
vue视频播放插件vue-video-player的具体使用方法
Nov 08 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 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
迅雷下载《中学科技》怀旧期刊下载
2021/02/27 无线电
解析php中array_merge与array+array的区别
2013/06/21 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
php图像处理类实例
2015/07/28 PHP
Thinkphp实现自动验证和自动完成
2015/12/19 PHP
利用php + Laravel如何实现部署自动化详解
2017/10/11 PHP
javascript innerHTML使用分析
2010/12/03 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
javascript文件中引用依赖的js文件的方法
2014/03/17 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
chrome不支持form.submit的解决方案
2015/04/28 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
Javascript中的 “&amp;” 和 “|” 详解
2017/02/02 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
js实现全选反选不选功能代码详解
2019/04/24 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
[01:44]《为梦想出发》—联想杯DOTA2完美世界全国高校联赛
2015/09/30 DOTA
详解pandas.DataFrame中删除包涵特定字符串所在的行
2019/04/04 Python
Python的numpy库下的几个小函数的用法(小结)
2019/07/12 Python
Python中return函数返回值实例用法
2020/11/19 Python
用python实现一个简单的验证码
2020/12/09 Python
美国当红的名品折扣网:Gilt Groupe
2016/08/15 全球购物
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
保安拾金不昧表扬信
2014/01/15 职场文书
大二自我鉴定
2014/01/31 职场文书
幼儿园家长寄语
2014/04/02 职场文书
党员个人整改措施
2014/10/24 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
会议通知格式范文
2015/04/15 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书
教你用Java Swing实现自助取款机系统
2021/06/11 Java/Android