參考部落格: https://www.cnblogs.com/rohelm/p/4033513.html

常用的表單驗證指令 

1. 必填項驗證

某個表單輸入是否已填寫，只要在輸入欄位元素上新增HTML5標記required即可：

<input type="text" required />  

2. 最小長度

驗證表單輸入的文字長度是否大於某個最小值，在輸入欄位上使用指令ng-minleng= "{number}"：

<input type="text" ng-minlength="5" /> 

3. 最大長度

驗證表單輸入的文字長度是否小於或等於某個最大值，在輸入欄位上使用指令ng-maxlength="{number}"：

<input type="text" ng-maxlength="20" />

4. 模式匹配

使用ng-pattern="/PATTERN/"來確保輸入能夠匹配指定的正則表示式：

<input type="text" ng-pattern="/[a-zA-Z]/" /> 

5. 電子郵件

驗證輸入內容是否是電子郵件，只要像下面這樣將input的型別設定為email即可：

<input type="email" name="email" ng-model="user.email" /> 

6. 數字

驗證輸入內容是否是數字，將input的型別設定為number：

<input type="number" name="age" ng-model="user.age" /> 

7. URL

 驗證輸入內容是否是URL，將input的型別設定為 url：

<input type="url" name="homepage" ng-model="user.facebook_url" />

 下面我們將這些表單驗證放到具體的實現中來測試一下：

  <div class="col-md-6">
        <form role="form" class="form-horizontal">
            <div class="form-group">
                <div class="col-md-4">
                    <label for="name">1.必填項</label>
                </div>
                <div class="col-md-8">
                    <input class="form-control" id="name" type="text" required ng-model='user.name' />
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-4">
                    <label for="minlength">2.最小長度=5</label>
                </div>
                <div class="col-md-8">
                    <input type="text" id="minlength" ng-minlength="5" ng-model="user.minlength" class="form-control" />
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-4">
                    <label for="minlength">3.最大長度=20</label>
　　　　　　　　　　</div>
                <div class="col-md-8">
                    <input type="text" ng-model="user.maxlength" ng-maxlength="20" class="form-control" />
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-4">
                    <label for="minlength">4. 模式匹配</label>
               </div>
                <div class="col-md-8">
                 <input type="text" id="minlength" ng-model="user.pattern" ng-pattern="/^[a-zA-Z]*\d$/" class="form-control" />
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-4">
                    <label for="email">5. 電子郵件</label>
　　　　　　　　　　</div>
                <div class="col-md-8">
                    <input type="email" id="email" name="email" ng-model="user.email" class="form-control" />
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-4">
                    <label for="age">6. 數字</label>
　　　　　　　　　　</div>
                <div class="col-md-8">
                    <input type="number" id="age" name="age" ng-model="user.age" class="form-control" />
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-4">
                    <label for="url"> 7. URL</label>
　　　　　　　　　　</div>
                <div class="col-md-8">
                    <input type="url" id="url" name="homepage" ng-model="user.url" class="form-control" />
                </div>
            </div>
            <div class="form-group text-center">
                <input class="btn btn-primary btn-lg" type="submit" value="提交" />
            </div>
        </form>       
    </div>
    <div class="col-md-12">
        1.必填項:{{user.name}}<br>
        2.最小長度=5:{{user.minlength}}<br>
        3.最大長度=20:{{user.maxlength}}<br>
        4.模式匹配:{{user.pattern}}<br>
        5.電子郵件:{{user.email}}<br>
        6.數字:{{user.age}}<br>
        7.URL:{{user.url}}<br>
    </div>

在測試中我們發現，只有當表示式滿足驗證，才會實時進行雙向繫結。同時我們也發現，效果圖如下：

似乎並沒有發生什麼問題，但是如果我們將其移植到一個隊HTML5驗證不怎麼好的瀏覽器再來測試一下【本例IE9】，問題來了，某些欄位完全沒得驗證