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>