本文开篇第一句话，想引用鲁迅先生《祝福》里的一句话，那便是：“我真傻，真的，我单单知道后端整天都是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>