veeValidate实战

kamushin233 发布于2019-08-30 14:03 / 1114人阅读

摘要：初始化项目网上很多教程，不再赘述搭建静态样式分支链接安装初体验分支安装中引入使用效果图在想验证的框添加指令。对于下面的示例，验证规则是直截了当的。这里使用了一个必填的验证。

说在前面

vee-validate 版本2.0.4的学习github地址
我的项目地址
第一次认真的在git上写一个demo教程，喜欢的可以star一下~^o^~ (^-^) (^o^)
后续会有一个完整的vue商城项目教程，希望得到大家的鼓励

分支说明

一步一步学习veeValidate，虽然是个小的demo，但是希望能够跟大家分享
通过创建多个分支，表示项目的进度，每个分支的复杂程度递增。

初始化vue项目

网上很多教程，不再赘述

Lesson1 搭建静态样式

lesson1分支链接

Lesson2 安装veeValidate初体验

Lesson2分支
安装

npm install vee-validate --save

main.js中引入

home.vue使用

效果图

在想验证的input框添加v-validate指令。多个验证规则用|分隔。对于下面的示例，验证规则是直截了当的。这里使用了一个必填的验证。这里使用button的disabled属性来控制是否可以下一步在计算属性中返回this.$validator.errors.has("name")如果error存在则disabled为true

Lesson3 使用中文错误提示

为了更好的使用vee-validate在src下新建文件夹并且创建文件validator.js
在main.js中引用validator.js，之前引用的代码将移入validator.js

接下来安装vue国际化

npm install vue-i18n --save

引用

import Vue from "vue";
import VeeValidate from "vee-validate";
import VueI18n from "vue-i18n";
import zh_CN from "vee-validate/dist/locale/zh_CN";

Vue.use(VueI18n);
const i18n = new VueI18n({
  locale: "zh_CN"
});
Vue.use(VeeValidate, {
  i18n,
  i18nRootKey: "validation",
  dictionary: {
    zh_CN
  }
});

然后效果图就是这样的了，这里的name是必须的对于一个中国人来说就有点不舒服了。
下一步就是将修改默认显示的错误信息

引入Validator

import  { Validator } from "vee-validate";

或者合并使用import VeeValidate, { Validator } from "vee-validate";

// 自定义validate
const Dictionary = {
  zh_CN: {
    messages: {
      required: field => "请输入" + field
    },
    attributes: {
      name: "账号"
    }
  }
};
// 自定义validate error 信息
Validator.localize(Dictionary);

效果

Lesson4 点击完成下一步实现自定义验证规则

添加之前漏掉的一点，一开始进入的时候按钮是不可点的所有添加

一进入就验证

接下来新增点击下一步点击页面
Step1.vue

router.js

Home.vue验证成功后点击下一步跳到Step1.vue

methods: {
      submit() {
          this.$router.push({name:"step1"})
      }
    }

validator.js添加自定义方法

/*自定义方法*/
Validator.extend("mobile", {
  getMessage: field => "手机格式不正确",
  validate: value =>
    value.length === 11 && /^((13|14|15|17|18)[0-9]{1}d{8})$/.test(value)
});

新增手机属性

新增的自定义方法就可以用了
这里值得注意的是，自定义方法要放在自定义错误消息上面，要不错误信息会有问题

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

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

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
VeeValidate 的使用场景以及配置

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

blair 2019-08-23 14:38 评论0 收藏0