平武建站

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

创建vue项目:

10年积累的成都网站建设、网站设计经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站制作后付款的网站建设流程，更有贵溪免费网站建设让你可以放心的选择与我们合作。

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);

例子

第一个测试例子

更多配置请参考官网!

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

中文配置

全局配置

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');

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

自定义错误提示

自定义验证规则

显示第一个错误!

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

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

例子 发验证码和注册!

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

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

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

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

template

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

js

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。


本文名称：VeeValidate的使用场景以及配置详解
网站网址：http://pwwzsj.com/article/gddgsp.html

其他资讯