vue表单验证

最近在做vue的项目，遇到表单验证的问题，验证手机，身份证号，护照号，必填选填等

-------------------------------------------------------------------------

改别人的代码，刚开始搞不懂用的什么组建，有两个

vue-validator  和vue-form

在网上找了相关正则表达式，写自定义的验证的回调函数，按照文档来，也不难，vue-validator虽然有中文文档，但是自定义验证这块看着有点醉，最后选择了vue-form

期间又遇到了样式显示不出来的问题，验证不通过时用红色提示，没去研究组建里面的东西

在DOM中看到验证通过与不通过分别是什么class 然后手写补充。。

.vf-invalid-customValidator{
  border-bottom: 1px solid #F44336 !important;
  box-shadow: 0 1px 0 0 #F44336 !important;
}

还遇到一个问题：按钮disabled失效，即使设置了disabled也可以点击

通过搜索，知道最新版本的vue已经解决了这个问题，为了项目不大改，做了如下修正

a.waves-effect.waves-light.btn(@click='signUp', v-bind:disabled='myform.$invalid' v-if="!myform.$invalid") 注册{{myform.$invalid}}
a.waves-effect.waves-light.btn(v-bind:disabled='myform.$invalid' v-if="myform.$invalid") 注册{{myform.$invalid}}

思路是一个绑定事件，一个不绑定事件，控制哪个给用户显示

来源：CSDN

作者：cuifancastle

链接：https://blog.csdn.net/cuifancastle/article/details/53401899