本文開篇第一句話，想引用魯迅先生《祝?！防锏囊痪湓挘潜闶牵?strong>“我真傻，真的，我單單知道后端整天都是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>