快捷導航

AngularJS實現(xiàn)表單驗證功能

更新時間：2017年01月09日 09:06:22 作者：Zerone1993

這篇文章主要為大家詳細介紹了AngularJS實現(xiàn)表單驗證功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下

AngularJS表單驗證功能實現(xiàn)代碼：

ng-model的作用：

1.ng-model 指令可以將輸入域的值與 AngularJS 創(chuàng)建的變量綁定
2.雙向綁定，在修改輸入域的值時， AngularJS 屬性的值也將修改
3.數(shù)據(jù)校驗
4.ng-model 指令可以為應(yīng)用數(shù)據(jù)提供狀態(tài)值(invalid, dirty, touched, error)
5.ng-model 指令基于它們的狀態(tài)為 HTML 元素提供了 CSS 類

css內(nèi)容：

/*angularJS會根據(jù)表單的狀態(tài)進行添加或者刪除對應(yīng)的樣式*/
/*定義輸入框不合法的默認背景顏色*/
input.ng-invalid {
  background-color: grey;
}

/*輸入框數(shù)據(jù)合法的默認背景顏色*/
input.ng-valid {
  background-color: yellow;
}

HTML正文：

<body ng-app="myApp">
<div ng-controller="myCtrl">
 <!-- 將表單輸入域的值與angularJS的變量綁定 -->
  名字: <input ng-model="name"><br>
 angularJS雙向綁定：{{name}}
</div>

<hr>
<p>表單輸入信息校驗</p>
<form name="myForm01">
  Email:<input type="email" name="myEmail01" ng-model="text">
  <!-- ng-show:類似avalon的ms-if的用法，如果校驗不通過則返回true,顯示提示內(nèi)容，數(shù)據(jù)校驗不太精確 -->
  <span ng-show="myForm01.myEmail01.$error.email" style="color: red">郵箱地址不合法!</span><br>
    數(shù)據(jù)校驗結(jié)果：<span>{{myForm01.myEmail01.$error.email}}</span>
</form>

<hr>
<p>ng-model 指令可以為應(yīng)用數(shù)據(jù)提供狀態(tài)值(invalid, dirty, touched, error)</p>
<form name="myForm02" ng-init="myText='test@qq.com'">
 Email:<input type="email" name="myEmail02" ng-model="myText" required></p> <!-- required標識不能為空，否則不合法 -->
 <h5>狀態(tài)</h5>
  <!-- 通過識別表單的email控件按照默認的規(guī)則進行校驗 -->
  數(shù)據(jù)輸入合法：{{myForm02.myEmail02.$valid}}<br> 
  數(shù)據(jù)改變：{{myForm02.myEmail02.$dirty}}<br>
  觸屏點擊： {{myForm02.myEmail02.$touched}}
</form>

<hr>
<p>ng-model 指令基于它們的狀態(tài)為 HTML 元素提供了 CSS 類</p>
<form name="myForm03">
  輸入你的名字:<input name="myName" ng-model="text" required>
</form>

效果：