Vue快速实现通用表单验证的方法

　　

本文开篇第一句话,想引用鲁迅先生《祝福》里的一句话,那便是:“我真傻,真的,我单单知道后端整天都是CRUD,我没想到前端整天都是形式表单”。这句话要从哪里说起呢?大概要从最近半个月的“全栈工程师”说起。项目上需要做一个城市配载的功能,顾名思义,就是通过框选和拖拽的方式在地图上完成配载。博主选择了前后端分离的方式,在这个过程中发现:首先,只要有依赖jQuery的组件,譬如Kendoui,即使使用了Vue,依然需要通过jQuery去操作DOM。其次,只有有通过Rozar生成的DOM,譬如HtmlHelper, Vue的双向绑定就突然变得尴尬起来,更不用说,Rozar中的@语法和Vue中的@指令相互冲突的问题,原本可以直接用v代表生成列的表,因为使用了HtmlHelper,突然一下子变得厌恶起来,虽然Rozar语法非常强大,可我依然没有在JavaScript里写c#的热情,因为实在太痛苦啦下跪……

　　

所以,想做好前后端分离,首先需要分离出一套前端组件库,做不到这一点,前后端分离就无从谈起,就像我们公司的项目,即使框架切换到。网络核心,可是在很长的一段时间里,我们其实还是再写MVC,因为所有的组件都是后端提供的HtmlHelper/TagHelper这种形式。我这次做项目的过程中,其实是通过jQuery实现了一部分组件,正因为如此,一个在前后端不分离时非常容易实现的功能,在前后端分离以后发现缺好多东西,就比如最简单的表单验证功能,即便你是在做一个新项目,为了保证产品在外观上的一致性,你还是得依赖老项目的东西,所以,这篇博客主要想说说前后端分离以后,Vue的时代怎么去做表单的验证,因为我不想测试同事再给我提错误,问我为什么只有来自后端接口的验证,而没有来自前端页面的验证。我希望,在写下这篇博客之前,我可以实现和老项目一模一样的表单验证。如同CRUD之于后端,80%的前端都是在写形式表单,所以,这个事情还是挺有意思的。

　　

　　

好的,作为国内最接“地”气的前端框架,Vue的文档可以说是相当地“亲民”啦!为什么这样说呢,因为其实在官方文档中,尤大已经提供了一个表单验证的示例,这个示例让我想起给某银行做自动化工具时的情景,因为这两者都是采用MVVM的思想,所以,理解起来是非常容易的,即:通过一个列表来存储错误信息,而这个错误信息会绑定到视图层,所以,验证的过程其实就是向这个列表里添加错误信息的过程。我们一起来看这个例子:

　　 　　 　　& lt; div> 　　& lt; h3>你好,请登录& lt;/h3> 　　& lt; div> 　　id=發oginFrom”比& lt;形式; 　　& lt; div> 　　& lt; label>邮箱& lt;/label> 　　& lt;输入类型=拔谋尽眂lass=氨淼タ丶d=癷nputEmail3”占位符=v模型“电子邮件”=暗缱佑始北? 　　& lt;/div> 　　& lt;/div> 　　& lt; div> 　　& lt; label>密码& lt;/label> 　　& lt;输入类型=懊苈搿眂lass=氨淼タ丶d=癷nputPassword3”占位符=v模型“密码”=懊苈搿北? 　　& lt;/div> 　　& lt; div> 　　& lt;按钮类型=鞍磁ァ眂lass=癰tn btn-default登录”v:点击=暗锹?)”的在登录& lt;/button> 　　& lt;/div> 　　& lt; div v=" errorList。长度比;0”比; 　　& lt; div类=熬╝lert-danger”角色=熬ā痹趝{errorList.join (“;”)}} & lt;/div> 　　& lt;/div> 　　& lt;/form> 　　& lt;/div> 　　& lt;/div> 　　& lt; script> 　　var vm=new Vue ({ 　　埃尔:“# loginFrom ', 　　数据:{ 　　电子邮件:“”, 　　密码:", 　　errorList: [] 　　}, 　　方法:{ 　　验证:函数(){ 　　这一点。errorList=[] 　　如果这一点。电子邮件==?{ 　　this.errorList.push(“请输入邮箱”); 　　其他}{ 　　var reg=/^ ([a-zA-Z] | [0 - 9]) (\ w | \) + @ [a-zA-Z0-9] + \。([a-zA-Z] {2,4}) $/; 　　如果(! reg.test (this.email)) { 　　this.errorList.push(“请输入有效的邮箱”); 　　} 　　} 　　如果这一点。密码==?{ 　　this.errorList.push(“请输入密码”); 　　其他}{ 　　如果(this.password。长度& lt;6){ 　　this.errorList.push(“密码长度不得少于6位”); 　　} 　　} 　　 　　this.errorList返回。长度& lt;=0; 　　}, 　　登录:函数(){ 　　如果(this.validate ()) { 　　alert('登录成功”); 　　} 　　} 　　} 　　}); 　　& lt;/script> 　　 　　

为了排除无关内容对大家的影响,写这个例子的时候,博主排除了一切复杂的HTML结构和CSS样式,经过简单润色以后,这个例子的效果展示如下,果然GUI满足了人们颜控的一面,可让这个世界高速运行的是CLI,引导是博主这种“全栈工程师”的最爱之一。这种验证方式简直是人类本能的反应,可这恰好是最糟糕的一个例子,因为这个代码完全没法复用,可以想象得到,如果再继续增加针对密码强度,譬如大小写,数字等等的验证,这个代码会混乱成什么样子,所以,这是最简单的表单验证,同样是最糟糕的表单验证。

Vue快速实现通用表单验证的方法