溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“AngularJS實現(xiàn)表單驗證功能的方法”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“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)的樣式*/
/*定義輸入框不合法的默認(rèn)背景顏色*/
input.ng-invalid {
background-color: grey;
}
/*輸入框數(shù)據(jù)合法的默認(rèn)背景顏色*/
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" >郵箱地址不合法!</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標(biāo)識不能為空，否則不合法 -->
<h6>狀態(tài)</h6>
<!-- 通過識別表單的email控件按照默認(rèn)的規(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>效果：
以上是“AngularJS實現(xiàn)表單驗證功能的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼