開場白：
angular.js 是谷歌出的前端js MV*框架，我也是今年做 worktile 的時候才開始接觸的，起初技術選型的時候還准備使用 backbone（畢竟很多大公司在使用他，而且也是比較早的提出前端MVC的框架），但是經過我們研究后發現，backbone寫個東西太費勁了，在這里我就不細說了，至於前端MVC框架的比較，有很多文章介紹過，至於我們為什么選擇angular.js，道理很簡單，我們發現他的時候覺得他太棒了，有強大的模板語言，數據雙向綁定，路由等等的特性，而且入門很簡單（我個人是這么認為的，我一直是一個后端工程師），也許這和angular的作者是java工程師有點關系吧，雖說入門簡單，但是深入了解還是有點難度的，特別是 directive (指令)
這篇文章的目的不是介紹一些入門知識，而是分享一些項目實際開發中遇到的問題，我們是怎么解決的，后面有時間我會寫一些我從剛開始接觸到后面的深入學習的一些心得和感受。
今天我主要是想分享下angular.js的驗證功能，以及擴展插件 w5cValidator.js
Angular.js的驗證（簡單介紹）：
angular.js 的表單驗證規則有 required(必填項)，type="number"(必須為數字)，type="email"(必須為郵箱地址)，ng-max（最大值），ng-min（最小值），ng-max-length（最大長度），ng-min-length（最小長度），ng-pattern（正則驗證）等等，而且angular寫自定的驗證規則也很簡單，具體的驗證細節參考官方文檔：http://docs.angularjs.org/guide/forms
其實就是幾個驗證的示例，下面2個例子一個是普通的驗證，一個是自定義驗證，都可以在官方文檔中找到
angular 所有驗證的信息都存儲在form表單里面，下面2個截圖是我在調試模式下截的，可以清楚的看到form有哪些元素，驗證的情況怎么樣等等
Angular.js驗證的缺點：
1.從第一個例子可以看出，當在輸入框輸入的時候觸發了驗證，背景色變綠，當刪除輸入的時候，背景色變紅，其實angular.js的驗證是時時的，當驗證失敗時，input會添加class ng-invalid，驗證成功時添加class ng-valid，當這個框曾經輸入了內容就會添加class ng-dirty，這樣我們可以設置這些樣式來控制驗證的情況，但是有時候我們不需要時時顯示驗證結果，當鼠標移走或者點擊SAVE的時候才去顯示驗證結果，默認好像不支持或者說很難實現
2.第二個例子是自定義的驗證，輸入內容時顯示驗證結果和錯誤信息這樣就必須要寫類似於下面的模板：
<div>
Size (integer 0 - 10):
<input type="number" ng-model="size" name="size"
min="0" max="10" integer />{{size}}<br />
<span ng-show="form.size.$error.integer">This is not valid integer！</span>
<span ng-show="form.size.$error.min || form.size.$error.max">
The value must be in range 0 to 10!</span>
</div>
一個系統中出現表單的地方太多太多，如果每個表單驗證都這樣寫，非常多的重復勞動，基本上同一個系統驗證錯誤的提示方式都差不多
問題：
1. 怎么可以統一這些規則和提示信息呢？用過jQuery validate的同學一定知道，他的錯誤信息和提示都是通過配置的形式，非常的方便，但是angular js默認提供的方式卻不是很好，究竟怎么樣才能做到和jQuery validate一樣呢？
2. 怎樣能讓光標移走或者點擊保存的時候出現驗證信息？
解決方案：
有了Angular.js的指令，實現這些都很簡單，我們在worktile中統一寫成了2個directive ，但是和項目聯系緊密，正好這個周末抽時間把這2個directive抽取出來做了一個獨立的驗證插件（w5c-Validator），希望能夠幫助一些朋友少寫一些重復的代碼
Github上的源碼地址為：https://github.com/why520crazy/w5c-validator-angular
使用步驟：
1. 在項目中引用 w5cValidator.js
2. 在表單form上添加一個指令 w5c-form-validate 和 w5c-submit 如下所示：
<form class="form-horizontal cw-form demo-form" role="form" w5c-submit="js_save_entity(form_validate)" w5c-form-validate="" novalidate name="form_validate"> <div class="form-group"> <label class="col-sm-2 control-label">郵箱</label> <div class="col-sm-10"> <input type="email" name="email" ng-model="entity.email" required="" class="form-control" placeholder="輸入郵箱"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">用戶名</label> <div class="col-sm-10"> <input required="" ng-pattern="/^[A-Za-z]{1}[0-9A-Za-z_]{1,19}$/" ng-model="entity.name" class="form-control" name="user_name" placeholder="輸入用戶名"> </div> </div> ... </form>
w5c-submit 函數是表單驗證成功后執行的事件，驗證失敗不會執行
3. 沒了，使用就這么簡單
使用注意事項：
1. w5cValidator 默認的錯誤提示使用了bootstrap的樣式和布局，使用到你的項目中需要修改默認的 show_error, remove_error 方法，可以是tip提示，可以是統一在某個地方顯示等等
2. w5cValidator 可以設置光標移走input時是否顯示錯誤提示，默認false
3. w5cValidator 自帶了默認的提示信息，同時支持自定義驗證規則提示信息
4. angular.js的所有驗證信息都是保存在form表單中的，w5cValidator也是監控表單元素的屬性來實現的，使用必須要設置form以及每個元素的name屬性，否則錯誤信息就找不到對應的元素
5. 看下以下的代碼你就能明白 1 2 3 的設置方式了：
w5cValidator.init({ //blur_trig : false, //show_error : function (elem, error_messages) { // //}, //remove_error: function (elem) { // //} }); w5cValidator.set_rules({ user_name: { required: "輸入的用戶名不能為空", pattern : "用戶名必須輸入字母、數字、下划線,以字母開頭" } });
好了，到此結束，希望這篇文章能夠幫助正在苦惱angular.js驗證的你！！！呵呵呵
歡迎大家指出文章中的錯誤，或者你有更好的解決方案可以分享
w5cValidator 並不是適合任何項目，比如時時顯示錯誤信息等暫時還不支持，主要提供一些思路，可以自己擴展成自己所需要
demo只在chrome下測試過
新浪微博: @why520crazy
出處： http://why520crazy.cnblogs.com
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。