VeeValidate 的使用场景以及配置

blair 发布于2019-08-23 14:38 / 1219人阅读

摘要：创建项目安装本文中使用的版本为在中引入例子第一个测试例子验证通过更多配置请参考官网我们只是用些常用配置和常用的验证中文配置全局配置这样就可以使用中文提示了自定义错误提示昵称不得为空写法昵称不得小于个字符

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

例子 第一个测试例子

更多配置请参考官网!
我们只是用些常用配置和常用的验证!

中文配置

全局配置

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

例子发验证码和注册!

这个例子中发验证码是一个验证注册又是一个验证所以有点意义!
在发送验证码的时候需要验证手机号码和图形验证码注册的时候需要验证除图形验证码之外的数据

template

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

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

云服务器 GPU云服务器 redis的使用场景消息队列的使用场景服务器配置以及价格腾讯云创建服务器以及配置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100904.html

veeValidate实战

摘要：初始化项目网上很多教程，不再赘述搭建静态样式分支链接安装初体验分支安装中引入使用效果图在想验证的框添加指令。对于下面的示例，验证规则是直截了当的。这里使用了一个必填的验证。说在前面 vee-validate 版本2.0.4的学习github地址我的项目地址第一次认真的在git上写一个demo教程，喜欢的可以star一下~^o^~ (^-^) (^o^) 后续会有一个完整的vue商城项...

kamushin233 2019-08-30 14:03 评论0 收藏0
veeValidate实战

摘要：初始化项目网上很多教程，不再赘述搭建静态样式分支链接安装初体验分支安装中引入使用效果图在想验证的框添加指令。对于下面的示例，验证规则是直截了当的。这里使用了一个必填的验证。说在前面 vee-validate 版本2.0.4的学习github地址我的项目地址第一次认真的在git上写一个demo教程，喜欢的可以star一下~^o^~ (^-^) (^o^) 后续会有一个完整的vue商城项...

AlienZHOU 2019-08-01 18:38 评论0 收藏0
veeValidate实战

摘要：初始化项目网上很多教程，不再赘述搭建静态样式分支链接安装初体验分支安装中引入使用效果图在想验证的框添加指令。对于下面的示例，验证规则是直截了当的。这里使用了一个必填的验证。说在前面 vee-validate 版本2.0.4的学习github地址我的项目地址第一次认真的在git上写一个demo教程，喜欢的可以star一下~^o^~ (^-^) (^o^) 后续会有一个完整的vue商城项...

kbyyd24 2019-08-22 14:56 评论0 收藏0
神策数据关海南：营销策略引擎解读，以平台化构建营销新生态

摘要：神策数据关海南营销策略引擎解读，以平台化构建营销新生态计算引擎图片神策数据关海南营销策略引擎解读，以平台化构建营销新生态微信在神策数据驱动大会现场，神策营销云架构师关海南发表了题为营销策略引擎的技术演进的演讲。在神策 2021 数据驱动大会现场，神策营销云架构师关海南发表了题为《营销策略引擎（Express）...

番茄西红柿 2021-11-22 14:55 评论0 收藏2637