本文開篇第一句話，想引用魯迅先生《祝福》里的一句話，那便是：“我真傻，真的，我單單知道后端整天都是CRUD，我沒想到前端整天都是Form表單”。這句話要從哪里說起呢？大概要從最近半個月的“全棧工程師”說起。項目上需要做一個城市配載的功能，顧名思義，就是通過框選和拖拽的方式在地圖上完成配載。博主選擇了前后端分離的方式，在這個過程中發(fā)現(xiàn)：首先，只要有依賴jQuery的組件，譬如Kendoui，即使使用了Vue，依然需要通過jQuery去操作DOM。其次，只有有通過Rozar生成的DOM，譬如HtmlHelper，Vue的雙向綁定就突然變得尷尬起來，更不用說，Rozar中的@語法和Vue中的@指令相互沖突的問題，原本可以直接用v-for生成列表，因為使用了HtmlHelper，突然一下子變得厭惡起來，雖然Rozar語法非常強大，可我依然沒有在JavaScript里寫C#的熱情，因為實在太痛苦啦Orz……

所以，想做好前后端分離，首先需要分離出一套前端組件庫，做不到這一點，前后端分離就無從談起，就像我們公司的項目，即使框架切換到.NET Core，可是在很長的一段時間里，我們其實還是再寫MVC，因為所有的組件都是后端提供的HtmlHelper/TagHelper這種形式。我這次做項目的過程中，其實是通過jQuery實現(xiàn)了一部分組件，正因為如此，一個在前后端不分離時非常容易實現(xiàn)的功能，在前后端分離以后發(fā)現(xiàn)缺好多東西，就比如最簡單的表單驗證功能，即便你是在做一個新項目，為了保證產(chǎn)品在外觀上的一致性，你還是得依賴老項目的東西，所以，這篇博客主要想說說前后端分離以后，Vue的時代怎么去做表單的驗證。因為我不想測試同事再給我提Bug，問我為什么只有來自后端接口的驗證，而沒有來自前端頁面的驗證。我希望，在寫下這篇博客之前，我可以實現(xiàn)和老項目一模一樣的表單驗證。如同CRUD之于后端，80%的前端都是在寫Form表單，所以，這個事情還是挺有意思的。

最簡單的表單驗證

OK，作為國內(nèi)最接“地氣”的前端框架，Vue的文檔可以說是相當?shù)亍坝H民”啦！為什么這樣說呢，因為其實在官方文檔中，尤大已經(jīng)提供了一個表單驗證的示例，這個示例讓我想起給某銀行做自動化工具時的情景，因為這兩者都是采用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>