veeValidate实战

前面说过vee-validate2.0.4版本学习github地址我的项目地址是第一次认真写一个git上的demo教程，喜欢的话可以star一下~^o^~(^-^)(^o^)以后会有完整的vue商城项目教程。希望得到大家的鼓励。分步说明学习veeValidate。虽然是一个小demo，但是希望通过创建多个分支来代表项目来与大家分享。进步，每个分支的复杂性都在增加。初始化Vue项目网上教程很多，就不细说了Lesson1搭建静态样式lesson1分支链接Lesson2安装veeValidate初体验Lesson2branch安装npminstallvee-validate--savemain.js引入home.vue使用效果图在要验证的输入框中添加v-validate指令。多个验证规则以|分隔。对于下面的示例，验证规则很简单。此处使用必需的验证。这里使用button的disabled属性来控制下一步是否可以在calculated属性中返回。在src下新建文件夹，新建文件validator.js。在main.js中引用validator.js。之前引用的代码将移至validator.js中。接下来，安装vue国际化npminstallvue-i18n--savereferenceimportVuefrom"vue";importVeeValidatefrom"vee-validate";importVueI18nfrom"vue-i18n";importzh_CNfrom"vee-validate/dist/locale/zh_CN";Vue.use(VueI18n);consti18n=newVueI18n({locale:"zh_CN"});Vue.use(VeeValidate,{i18n,i18nRootKey:"validation",dictionary:{zh_CN}});然后效果图是这样的，这里的名字对于一个中国人来说是必须的有点不舒服。接下来就是将修改后的默认显示的错误信息引入Validatorimport{Validator}from"vee-validate";或者合并importVeeValidate,{Validator}from"vee-validate";//customvalidateconstDictionary={zh_CN:{messages:{required:field=>"Pleaseenter"+field},attributes:{name:"Account"}}};//自定义验证错误信息Validator.localize(Dictionary);EffectLesson4点击完成下一步实现自定义在添加验证规则之前漏掉的一点是入口开始的按钮是不能点击的。所有添加将在添加后立即进行验证。接下来点击下一步，点击页面。Step1.vuerouter.jsHome.vue验证成功后点击下一步跳转到Step1.vuemethods:{submit(){this.$router.push({name:'step1'})}}validator.js添加自定义方法/*自定义方法*/Validator.extend("mobile",{getMessage:field=>"手机格式不正确”，验证：value=>value.length===11&&/^((13|14|15|17|18)[0-9]{1}\d{8})$/.test（价值）}）;添加新的手机属性自定义方法即可使用。这里值得注意的是，自定义的方法要放在自定义的错误信息上，否则错误信息会出问题。获取更多技术相关文章。关注公众号“前端幼儿园”回复加群，即可加入“前端小仙女群”