2016年4月22日 星期五

陸・Angular表單驗證

來源自:Why Should We Validate Our Websites with Validators?
在Web的世界裡,常常會遇到「表單」功能,通常也要同時「驗證使用者資料」
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之後,我們就可以直接使用了,用法如下:

重點整理


  1. ng的input驗證需要用form包起來,form與需驗證的input都需要有name屬性。
  2. input可以掛的驗證屬性如下:
    1. 必填(required)
    2. 最大長度(maxlength)
    3. 最小長度(minlength)
    4. 最大值(max)
    5. 最小值(min)
    6. 格式(ex:Email格式、number數值格式、url網址格式、date日期格式...)
  3. ng-show與form驗證屬性搭配,即可達到「客制化提醒使用者驗證」的功能。
  4. 「客制化提醒使用者驗證」功能也可以用ng官方的模組「ngMessage」。

下集預告

下次我們將會介紹ng中最神奇的客制化功能(directive)!
驚艷度不亞於ng-repeat與form驗證~敬請期待!
那麼,我們下次見囉!

參考資料