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

创建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

例子 发验证码和注册!

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

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

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的值 不然不会显示错误信息

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

(0)

相关推荐

  • vue中vee validate表单校验的几种基本使用

    今天主要记录一下用vee-validate来进行表单校验的几个基本使用.包括最基础的必填和长度校验:异步请求服务的校验(重名校验),还有延迟校验.如何引入等就不在这里赘述了,直接进入主题. 1.必填和长度校验 直接采用v-validate属性进行配置,不同的校验采用 '|' 隔开.是否有报错根据 errors.has('userName') 进行判断,'userName'对应的是表单的name属性的值. errors.first('userName)会展示表单校验中第一个错误信息. <el-co

  • 详解vee-validate的使用个人小结

    学习vee-validate,首先可以去阅读官方文档,更为详细可以阅读官网中的规则.英文文档可能会有不理解的地方,推荐大家看这篇博客 下面来简单总结一下我的使用: 一.安装 npm install vee-validate@next --save 后面加@next是为了安装vue2.0的版本 二.引入 我使用的是vue-cli脚手架工具,需要在main.js中 import VeeValidate from 'vee-validate' Vue.use(VeeValidate); 三.简单的使用

  • Vee-Validate的使用方法详解

    引入: npm install vee-validate --save vue代码: import VeeValidate from 'vee-validate'; import zh_CN from 'vee-validate/dist/locale/zh_CN'; //引入中文包,提示信息可以以中文形式显示 import { Validator } from 'vee-validate'; Validator.addLocale(zh_CN); // 设置提示信息中文方式显示 const c

  • Vue中使用vee-validate表单验证的方法

    Vue项目遇到要表单验证了吧,对我来说表单验证是个很纠(dan)结(teng)的内容,各种判断凌乱到飞起.往常使用jquery的validate插件做表单验证方便吧,你也可以在Vue里引入jquery的validate插件(如何引入jquery在我上一篇博文有介绍,点击查看).但是我们是做vue项目也,不到实在解决不了还是建议不要引入,因为Vue自己就有表单验证的插件,那就是vee-validate. 我在这并不是详细讲解vee-validate的使用功能,只是快速了解如何在项目里使用vee-v

  • vee-validate vue 2.0自定义表单验证的实例

    亲测可用 学习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> <

  • VeeValidate在vue项目里表单校验应用案例

    VeeValidate是什么: VeeValidate是Vue.js的验证库,它有很多验证规则,并支持自定义规则.它基于模板,因此它与HTML5验证API相似并且很熟悉.您可以验证HTML5输入以及自定义Vue组件.它也是以本地化为基础构建的,实际上我们有大约44种语言由精彩的社区成员支持和维护. 本文包含VeeValidate包含以下几点应用: 1.基本安装使用 2.本地化支持 3.自定义规则和错误消息 4.验证HTML5输入和自定义Vue组件 5.统一提交按钮处理 先看看页面效果: 如果要看

  • vue+VeeValidate 校验范围实例详解(部分校验,全部校验)

    搜索很久,没有发现有关于vue+VeeValidate部分校验的.自己写一个. 主要是两个场景: 1. 校验范围内,所有的字段. 2. 校验全局所有字段. 主要方法: 1.validate(fields, scope) 2. validateAll(fields) 场景: 遍历得到多个列表,每一个列表都可以独立保存当前列表.在保存当前列表的时候,需要校验当前列表输入框的合法性. 代码: <div class=" col-xs-12 col-md-6 col-lg-4" v-for

  • Vue2.0表单校验组件vee-validate的使用详解

    vee-validate使用教程 本文适合有一定Vue2.0基础的同学参考,根据项目的实际情况来使用,关于Vue的使用不做多余解释.本人也是一边学习一边使用,如果错误之处敬请批评指出* 一.安装 npm install vee-validate@next --save 注意:@next,不然是Vue1.0版本 bower install vee-validate#2.0.0-beta.13 --save 二.引用 import Vue from 'vue'; import VeeValidate

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

    创建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(VeeValida

  • Spring Java-based容器配置详解

    装Java-based的配置 使用 @Import 注解 跟在Spring XML文件中使用<import>元素添加模块化的配置类似,@Import注解允许你加载其他配置类中的@Bean定义: @Configuration public class ConfigA { @Bean public A a() { return new A(); } } @Configuration @Import(ConfigA.class) public class ConfigB { @Bean public

  • 史上最全Android build.gradle配置详解(小结)

    Android Studio是采用gradle来构建项目的,gradle是基于groovy语言的,如果只是用它构建普通Android项目的话,是可以不去学groovy的.当我们创建一个Android项目时会包含两个Android build.gradle配置详解文件,如下图: 一.Project的build.gradle文件: 对应的build.gradle代码如下: // Top-level build file where you can add configuration options

  • 基于Android FileProvider 属性配置详解及FileProvider多节点问题

    众所周知在android7.0,修改了对私有存储的限制,导致在获取资源的时候,不能通过Uri.fromFile来获取uri了我们需要适配7.0+的机型需要这样写: 1:代码适配 if (Build.VERSION.SDK_INT > 23) {// intent.setFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION); Uri contentUri = FileProvider.getUriForFile(context, SysInfo.packageN

  • Android studio 混淆配置详解

    混淆 studio 使用Proguard进行混淆,其是一个压缩.优化和混淆java字节码文件的一个工具. 功能:Shrinking(压缩).Optimization(优化).Obfuscattion(混淆).Preverification(预校验)四个操作. 优点: 1.删除项目无用的资源,有效减小apk大小: 2.删除无用的类.类成员.方法和属性,还可以删除无用的注释,最大限度的优化字节码文件: 3.使用简短无意义的名称重命名已存在的类.方法.属性等,增加逆向工程的难度. 配置 buildTy

  • nginx proxy_cache 缓存配置详解

    前言: 由于本人工作原因,涉及到网络直播领域,其中视频的回放下载,涉及到了一些视频下载方面的技术.针对于一个完整视频的下载,目前市面上的主流做法是,先将整个视频流切片,存储到文件服务器中,在用户需要观看回放视频时.通过一个视频回源服务器,去文件服务器中逐个请求切片,返回给用户播放. 今天着重探讨的是关于回源服务器缓存的配置以及合理的缓存策略. 通过给回源服务器配置缓存的案例,详细讲解一整套缓存配置机制,并且可沿用到其他任何缓存配置场景中. 今天的讲解分为四点: 回源服务器的工作是啥为啥 需要给回

  • Spring Boot事务配置详解

    1.在启动主类添加注解:@EnableTransactionManagement 来启用注解式事务管理,相当于之前在xml中配置的<tx:annotation-driven />注解驱动. 2.在需要事务的类或者方法上面添加@Transactional() 注解,里面可以配置需要的粒度: 这么多东西提供配置: Isolation :隔离级别 隔离级别是指若干个并发的事务之间的隔离程度,与我们开发时候主要相关的场景包括:脏读取.重复读.幻读. 我们可以看 org.springframework.

  • redis配置文件中常用配置详解

    此次安装的版本为: 5.0.3 [root@localhost local]# redis-server --version Redis server v=5.0.3 sha=00000000:0 malloc=jemalloc-5.1.0 bits=64 build=afabdecde61000c3 打开redis.cof NETWORK # 指定 redis 只接收来自于该IP地址的请求,如果不进行设置,那么将处理所有请求 bind 127.0.0.1 #是否开启保护模式,默认开启.要是配置

  • Spring多个数据源配置详解

    前言 在上篇文章讲到了如何配置单数据源,但是在实际场景中,会有需要配置多个数据源的场景,比如说,我们在支付系统中,单笔操作(包含查询.插入.新增)中需要操作主库,在批量查询或者对账单查询等对实时性要求不高的场景,需要使用读库来操作,依次来减轻数据库的压力.那么我们如何配置多数据源? 这里还是基于springboot应用的情况下,我们看一下怎么配置. 因为SpringBoot会实现自动配置,但是SpringBoot并不知道我们的业务场景分别要使用哪一个数据源,因此我们需要把相关的自动配置关闭. 首

  • Tomcat用户管理的优化配置详解

    目录 tomcat用户管理配置 tomcat优化 一.tomcat中的三种运行模式之运行模式的优化 二.tomcat执行器(线程池)的优化 三.tomcat优化之禁用AJP连接器实现动静分离 四.tomcat中JVM参数优化 tomcat用户管理配置 在tomcat-users.xml中添加用户: <role rolename="manager"/> <role rolename="manager-gui"/> <role rolena

随机推荐