说在前面vee-validate 版本2.0.4的学习github地址我的项目地址第一次认真的在git上写一个demo教程，喜欢的可以star一下~^o^~ (^-^) (^o^) 后续会有一个完整的vue商城项目教程，希望得到大家的鼓励分支说明一步一步学习veeValidate，虽然是个小的demo，但是希望能够跟大家分享通过创建多个分支，表示项目的进度，每个分支的复杂程度递增。初始化vue项目网上很多教程，不再赘述Lesson1 搭建静态样式lesson1分支链接Lesson2 安装veeValidate初体验Lesson2分支安装npm install vee-validate --savemain.js中引入home.vue使用效果图在想验证的input框添加v-validate指令。多个验证规则用|分隔。对于下面的示例，验证规则是直截了当的。这里使用了一个必填的验证。这里使用button的disabled属性来控制是否可以下一步在计算属性中返回this.$validator.errors.has('name')如果error存在则disabled为trueLesson3 使用中文错误提示为了更好的使用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是必须的对于一个中国人来说就有点不舒服了。下一步就是将修改默认显示的错误信息引入Validatorimport { Validator } from "vee-validate";或者合并使用import VeeValidate, { Validator } from "vee-validate";// 自定义validateconst Dictionary = { zh_CN: { messages: { required: field => "请输入" + field }, attributes: { name: "账号" } }};// 自定义validate error 信息Validator.localize(Dictionary);效果Lesson4 点击完成下一步实现自定义验证规则添加之前漏掉的一点，一开始进入的时候按钮是不可点的所有添加一进入就验证接下来新增点击下一步点击页面Step1.vue<template> <div class="form-box"> <p>自定义验证规则学习</span> <form class="sui-validate" method="" name="" @submit.prevent="submit"> <div class="controls"> <input name="mobile" type="text" v-model="name" placeholder="请输入电话" v-validate="'required|mobile'"> <span v-show="errors.has('mobile')" class="help">{{ errors.first('mobile') }}</span> </div> <button class="button" type="submit" :disabled="disabledFlag">下一步</button> </form> </div></template><script> export default { name: 'Step1', data() { return { name: '' } }, computed: { disabledFlag() { //验证不通过button disabled return this.$validator.errors.has('mobile') } }, methods: { submit() { } } }</script>router.jsHome.vue验证成功后点击下一步跳到Step1.vuemethods: { 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)});新增手机属性新增的自定义方法就可以用了这里值得注意的是，自定义方法要放在自定义错误消息上面，要不错误信息会有问题获取更多技术相关文章，关注公众号”前端女塾“。回复加群，即可加入”前端仙女群“
