Angularjs總結（一）表單驗證

常用的表單驗證

1.必須字段

html5特性 增加required

2.最小長度和最大長度

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

3.模式比對——正規表達式

4.郵件模式 将type設定為email

5.數字 将type設定為number

6.url 将type設定為url

不常用（以下屬性在form表單中）

1.屏蔽對表單的驗證

novalidate

2.未修改過的表單 bool屬性 true表示已修改過

formName.inputFieldName.$pristine;

3.已修改過的表單 bool屬性

formName.inputFieldName.$dirty

4.通過表單驗證 bool屬性

formName.inputFieldName.$valid

5.未通過表單驗證 bool屬性

formName.inputFieldName.$invalid

例：

1 <form role="form" name="myForm" ng-submit="submitForm(myForm.$valid)" class="form-horizontal" novalidate>
 2 <div class="form-group has-feedback">
 3 <div class="col-md-4">
 4 <label for="name">1.必填項</label>
 5 </div>
 6 <div class="col-md-8">
 7 <input class="form-control" id="name" name="name" type="text" required ng-model='user.name' />
 8 <span class="glyphicon glyphicon-ok form-control-feedback"
 9 ng-show="myForm.name.$dirty && myForm.name.$valid"></span>
10 </div>
11 </div>
12 </form>
           

$pristine 【沒修改】：{{myForm.name.$pristine }}  

$dirty【修改過】：{{myForm.name.$dirty}}  

$invalid【驗證失敗】：{{myForm.name.$invalid}}  

$invalid【驗證成功】：{{myForm.name.$valid}}  

required：{{myForm.name.$error.required}}  

ngMessages對表單進行優化

1.首先我們需引入angular.module('myApp', ['ngMessages']);

ng是通過$error來監視模型變化的，$error中會給出詳細的錯誤資訊

例子：

1 <form role="form" name="myForm" class="form-horizontal" novalidate>
 2     <div class="form-group">
 3         <div class="col-md-2">
 4             使用者名
 5         </div>
 6         <div class="col-md-10">
 7             <input type="text" placeholder="ng-Messages測試" name="name" ng-model="username.name"
 8                    ng-minlength=3 ng-maxlength=20 required />
 9             <hr />
10             $error：{{myForm.name.$error}}
11             <hr />
12             <div ng-messages="myForm.name.$error">
13                 <div ng-message="required">必填項</div>
14                 <div ng-message="minlength">字元太短小于3</div>
15                 <div ng-message="maxlength">字元太長大于20</div>
16             </div>
17         </div>
18     </div>
19 </form>
           

2.錯誤提示複用

将其作為模闆，指定的路徑由ng自動添加，這裡需要使用到ng-messages-include指令；

首先将錯誤放到一靜态頁面error.html

1 <div ng-message="required">必填項</div>
2 <div ng-message="email">郵件格式不對</div>
3 <div ng-message="minlength">字元太短小于3</div>
4 <div ng-message="maxlength">字元太長大于20</div>
5 <!--在所用到的html頁面中用ng-messages-include引入相應的靜态頁面-->
6 <div ng-messages="myForm.name.$error" ng-messages-multiple ng-messages-include="@Url.Content('~/Content/template/error.html)"></div>
           

更多專業前端知識，請上 【猿2048】www.mk2048.com