vue form check 表单验证的实现代码
vue-form-check (基于vue的表单验证)具体实现代码如下所述:
安装
//安装 npmivue-form-check-S
引用
//引用(eg.在工程的main.js下) importvueFormCheckfrom'vue-form-check' Vue.use(vueFormCheck)
调用
this.$checkForm(current,config) @params current是当前校验对象 config是校验规则对象 config.alias别名 config.type配置项数据类型 config.required是否必填 config.rule正则校验 config.depend先决条件(省事可以在callback里直接判断,推荐写,true校验本项;false不校验本项) config.callback灵活校验(rule同时出现,只处理callback,参数是当前值,true校验通过;false校验不通过) @returnobject对象 不通过的话{alias:'电话',type:'rule'}alias是配置的别名,type可以是['type'|'required'|'rule'] 校验通过的话{}空对象 ps.验证表单可以写在mixin里,这里简单处理直接写在组件里了
Component
//使用例子 newVue({ data(){ return{ params:{ id:'1234', person:{ name:'jackie', age:'27', phone:'18266666666', home:['罗湖区田心村'] } } } }, methods:{ submit(){ //... console.log('submitsuccess'); }, check(){ letobj=this.$checkForm(this.params,{ id:{ alias:'id', type:'string' }, //必填校验 'person.name':{ alias:'学校', type:'string', required:true }, //正则校验 'person.phone':{ alias:'电话', type:'string', rule:/^1[345678][0-9]{9}$/ }, //灵活校验,如数值、日期区间验证 'person.age':{ alias:'年龄', callback(value){ if(value<30&&value>18){ returntrue; } returnfalse; } }, //先决校验,如果电话等于以下,校验地址信息 'person.home':{ alias:'方向', type:'array', required:true, depend(){ if(this.params.person.phone==='18210517463'){ returntrue; } returnfalse; } } }); constlength=Object.keys(obj).length; if(length===0){ returnthis.submit(); } switch(obj.type){ case'type': this.$alert(`${obj.alias}的类型定义错误`,'提示'); break; case'required': this.$alert(`${obj.alias}是必填项`,'提示'); break; case'rule': this.$alert(`${obj.alias}的输入不符合规范`,'提示'); break; default: break; } } } });
补充:vue-form表单验证是否为空值
重点部分:
点击表单的submit按钮触发form部分@submit=”submit”事件:
submit事件定义在js部分:
prevent:文档上说了在事件后面加上.prevent就可以阻止默认事件了。
form@submit.prevent=”submit”
总结
以上所述是小编给大家介绍的vueformcheck表单验证的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!