[Angular-1]自製驗證式ng-pattern

其實Angular的其中一個精華是已經可以在HTML裡面做很多事情和判斷,也就是說Angular可以寫到幾乎已經不用寫太多JS了,但這是一個雙面刃,畢竟JS是前端很重要的命根之一。

或說回來,Angular在製作表單可以把引導性做的很高,立即的判斷該欄位是否是正確的輸入值(例如電子信箱不會有中文字),許多內建基本的驗證式(例如信箱格式,文字長短等等)上網都可以輕鬆找尋到就不多介紹。

這次的主題是可以自定義條件的ng-pattern,那想要善用ng-pattern就不得不學習一下燒翻腦袋的正則表示式(RegExp)啦!正則表示式就請參考我的另外一篇文章囉!

ng-pattern的用法

先來討論ng-pattern使用方式,最基本的使用方式是把他放入一個input的tag裡面,其實就跟表達式(ng-show等等)的方法一樣,但只有他單獨出現的話是沒有意義的,簡單的例子如下:

<div ng-form name="demoform">
    <input type="text"
    name="identify"
    placeholder="請輸入身分證"
    class="style"
    ng-model="user.identify"
    ng-pattern="/[A-Z][0-9]{9}/" />
    <span ng-show="demoform.identify.$error.pattern">輸入的格式不正確</span>
</div> 

第一個規則是驗證式(如這次的例子ng-pattern)都需要被包在form的tag裡面喔!

Angular有自己的ng-form,與原生的HTML的form差異在哪這邊不多做探討,總之直接用一套Angular的表達式也比較有優點,不要忘記幫ng-form取上名字name="demoform"

input的原聲屬性全部都可以使用,ng-model是Angular處理資歷的表達式不多做探討,ng-pattern為驗證式,當然不能忘記要幫他取名子name="identify"

再來先不要探討ng-pattern裡面的東西,ng-pattern本身是驗證式,所以當使用者輸入的欄位不符合我自訂的條件(/[A-Z][0-9]{9}/)的話會激活一個內建$error的屬性,所以我span的表達式ng-show會為true而顯示

這裡可以很語意化的看成表單(demoform)的(.)某個input(identify)的(.)錯誤($error)的(.)某個驗證式(pattern)為真,所以span這個tag就會出現輸入的格式不正確這行字。

這就是驗證式基本的用法,當然可以配上CSS和其他手法玩得讓表單更有引導性,但這裡就不在深入討論了,至於基本的驗證式介紹也可以直接參考Angular的官方網站

ng-pattern可以外部帶入

直接看範例:

index.html
<input type="text"
    name="identify"
    placeholder="請輸入身分證"
    class="style"
    ng-model="user.identify"
    ng-pattern="identifyRegExp" />
app.js
angular.module('app',[])
    .controller('contrl',[finction(){
        this.identifyRegExp = /[A-Z][0-9]{9}/;
    }])

當然也可以自己製作一些function讓他動態產生,這裡就不多討論了,接下來正則表示式就請參考我的另外一篇文章囉!

comments powered by Disqus