 |
| 來源自：Why Should We Validate Our Websites with Validators? |
AngularJs裡面提供的表單驗證功能，要從AngularJs與Form糾葛的愛恨情仇說起
在AngularJs中，如果要搭配驗證功能，就必須要有form這個標籤
form可以幫忙驗證其中的輸入標籤（包含input、select、textarea）
也就是說，要驗證的部分全部都要包進form當中！
要注意什麼？
- form一定要有name的屬性
- form裡面需要驗證的標籤也一定要有name的屬性
如此一來AngularJs就自動在js中產生form的屬性，並且可以開始做驗證的相關動作
這邊我做了一個Demo給大家參考，此部分有搭配簡單的css做處理，讓表單視覺上更友善
如果都包好了，AngularJs會把這些東西變成一個樹狀結構
form驗證屬性
Form.$error
＞輸出：json物件陣列（object array）表示這個from中，有需驗證的input的驗證未過，是一個類似上方的樹狀結構。
Form.$dirty
＞輸出：布林值（bool）表示這個form裡面的內容是否已經被使用者輸入過。
Form.$pristine
＞輸出：布林值（bool）表示這個form是否為初始狀態。
Form.$valid與Form.$invalid【常用】
＞輸出：布林值（bool）表示這個Form中的所有需要的驗證是否都通過的結果。
$valid與$invalid為相反的結果，可依照需要與習慣自由取用。
Form.$submitted
＞輸出：布林值（bool）表示這個form是否有被送出過（submitted）。
Input.$untouched與Input.$touched
＞輸出：布林值（bool）表示這個input是否有被使用者聚焦過（focus）。
$untouched與$touched為相反結果，可依照需要與習慣自由取用。
Input.$error
＞輸出：json物件（object）表示這個input中，有需要驗證的驗證未過，是一個類似上方的樹狀結構。
【input驗證屬性通常包含】
- 必填（required）
- 最大長度（maxlength）
- 最小長度（minlength）
- 最大值（max）
- 最小值（min）
- 格式（ex：Email格式、number數值格式、url網址格式、date日期格式...）
Input.$dirty【常用】
＞輸出：布林值表示這個input是否已經被使用者輸入過。
Input.$pristine
＞輸出：布林值表示這個input是否為初始狀態。
Input.$valid與Input.$invalid【常用】
＞輸出：布林值表示這個input需要的驗證是否都通過的結果。
$valid與$invalid為相反的結果，可依照需要與習慣自由取用。
form在js中的操作方法
form.$setValidity()
設定form中物件的驗證狀態，通常用於客制化設計（directive）。
form.$setDirty()
設定form為已經被使用者輸出過的狀態。
form.$setPristine()【常用】
設定form為初始狀態。form.$setUntouched()
設定form為沒被聚焦過的狀態。此動作會移除form的class中'ng-touched'屬性
form.$setSubmitted()
設定form為已經被送出過的狀態。驗證表單設計使用到的ng屬性
ng-show
可以改變元素的「可見度」。另外ng有個「相同作用，但原理不同」的ng屬性「ng-if」
會依照判斷式，動態產生或移除 DOM 裡的元素。
ng-disabled
可以改變元素的「可使用性」，也就是說，如果這個屬性掛在按鈕上，且ng-disabled屬性判斷為true的時候，就可以把按鈕變為不能按。所以常被用來搭配ng-disabled='form.$invalid'來做到「表單驗證過後，送出按鈕才能按」的功能！
所以
綜合以上講過的屬性，我們就可以做到表單驗證的功能！有沒有其他方法可以做到「提示使用者錯誤訊息」呢？
Angular官方有提供一個模組（Module）叫做「ngMessages」，也可以達到相同的目的！這邊我也寫了一個ngMessages的Demo
使用上除了需要angualr.js以外，還需要angular-message.js才有辦法使用！
這邊我們利用jsfiddle提供的External Resources功能來import進來
＊angular.min.js的.min意思是被壓縮過的js檔案，壓縮可以讓js檔案變的更小，優化網站的loading速度，也可以讓其中的程式碼變的沒這麼簡單易懂（比較不容易簡單的被copy）。
之前有提到ng-app底下會是一個樹狀結構，所以ngMessage也必須被掛載在ng-app底下
如果沒有掛載起來直接用，js被run起來會直接噴一大堆Error給你看阿阿阿！！
ng-app的結構如下圖：
那麼，掛起ngMessage之後，我們就可以直接使用了，用法如下：
重點整理
- ng的input驗證需要用form包起來，form與需驗證的input都需要有name屬性。
- input可以掛的驗證屬性如下：
- 必填（required）
- 最大長度（maxlength）
- 最小長度（minlength）
- 最大值（max）
- 最小值（min）
- 格式（ex：Email格式、number數值格式、url網址格式、date日期格式...）
- ng-show與form驗證屬性搭配，即可達到「客制化提醒使用者驗證」的功能。
- 「客制化提醒使用者驗證」功能也可以用ng官方的模組「ngMessage」。
下集預告
下次我們將會介紹ng中最神奇的客制化功能（directive）！
驚艷度不亞於ng-repeat與form驗證～敬請期待！
那麼，我們下次見囉！