您的位置:首页 > 产品设计 > UI/UE

vue表单验证

2016-11-29 23:23 274 查看
最近在做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}}

思路是一个绑定事件,一个不绑定事件,控制哪个给用户显示
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  vue 表单验证