Vue快速实现通用表单验证的示例代码

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

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

最简单的表单验证

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

<div> <h2>你好，请登录</h2> <div>  <form >   <div>    <label>邮箱</label>    <input type="text" class="form-control"  placeholder="Email" v-model="email">    </div>   </div>   <div>    <label>密码</label>    <input type="password" class="form-control"  placeholder="Password" v-model="password">   </div>   <div>    <button type="button" class="btn btn-default login" v-on:click="login()">登录</button>   </div>   <div v-if="errorList.length > 0">    <div class="alert alert-danger" role="alert">{{errorList.join(';')}}</div>   </div>  </form> </div></div><script>var vm = new Vue({ el: '#loginFrom', data: {  email: "",  password: "",  errorList: [] }, methods: {  validate: function () {   this.errorList = []   if (this.email == '') {    this.errorList.push('请输入邮箱');   } else {    var reg = /^([a-zA-Z]|[0-9])(/w|/-)+@[a-zA-Z0-9]+/.([a-zA-Z]{2,4})$/;    if (!reg.test(this.email)) {     this.errorList.push('请输入有效的邮箱');    }   }   if (this.password == '') {    this.errorList.push('请输入密码');   } else {    if (this.password.length < 6) {     this.errorList.push('密码长度不得少于6位');    }   }   return this.errorList.length <= 0;  },  login: function () {   if (this.validate()) {    alert('登录成功');   }  } }});</script>