AngularJS實(shí)現(xiàn)表單驗(yàn)證功能
更新時(shí)間：2017年01月09日 09:06:22 作者：Zerone1993
這篇文章主要為大家詳細(xì)介紹了AngularJS實(shí)現(xiàn)表單驗(yàn)證功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
AngularJS表單驗(yàn)證功能實(shí)現(xiàn)代碼：
ng-model的作用：
1.ng-model 指令可以將輸入域的值與 AngularJS 創(chuàng)建的變量綁定
2.雙向綁定，在修改輸入域的值時(shí)， AngularJS 屬性的值也將修改
3.數(shù)據(jù)校驗(yàn)
4.ng-model 指令可以為應(yīng)用數(shù)據(jù)提供狀態(tài)值(invalid, dirty, touched, error)
5.ng-model 指令基于它們的狀態(tài)為 HTML 元素提供了 CSS 類
css內(nèi)容：
/*angularJS會(huì)根據(jù)表單的狀態(tài)進(jìn)行添加或者刪除對(duì)應(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>表單輸入信息校驗(yàn)</p>
<form name="myForm01">
Email:<input type="email" name="myEmail01" ng-model="text">
<!-- ng-show:類似avalon的ms-if的用法，如果校驗(yàn)不通過(guò)則返回true,顯示提示內(nèi)容，數(shù)據(jù)校驗(yàn)不太精確 -->
<span ng-show="myForm01.myEmail01.$error.email" style="color: red">郵箱地址不合法!</span><br>
數(shù)據(jù)校驗(yàn)結(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)識(shí)不能為空，否則不合法 -->
<h5>狀態(tài)</h5>
<!-- 通過(guò)識(shí)別表單的email控件按照默認(rèn)的規(guī)則進(jìn)行校驗(yàn) -->
數(shù)據(jù)輸入合法：{{myForm02.myEmail02.$valid}}<br>
數(shù)據(jù)改變：{{myForm02.myEmail02.$dirty}}<br>
觸屏點(diǎn)擊： {{myForm02.myEmail02.$touched}}
</form>
<hr>
<p>ng-model 指令基于它們的狀態(tài)為 HTML 元素提供了 CSS 類</p>
<form name="myForm03">
輸入你的名字:<input name="myName" ng-model="text" required>
</form>
效果：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
AngularJS基礎(chǔ) ng-submit 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-submit 指令,這里對(duì)ng-submit 指令的基礎(chǔ)資料做了詳細(xì)介紹整理，并附有代碼示例，有需要的小伙伴可以參考下2016-08-08
AngularJS通過(guò)$location獲取及改變當(dāng)前頁(yè)面的URL
本篇將介紹AngularJS中的$location服務(wù)的基本用法,$location服務(wù)的主要作用是用于獲取當(dāng)前url以及改變當(dāng)前的url,并且存入歷史記錄。本文通過(guò)示例代碼介紹的很詳細(xì)，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。2016-09-09
這篇文章主要為大家介紹了Angular?@Injectable注解的工作原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
angularjs點(diǎn)擊圖片放大實(shí)現(xiàn)上傳圖片預(yù)覽
這篇文章主要為大家詳細(xì)介紹了angularjs點(diǎn)擊圖片放大實(shí)現(xiàn)上傳圖片預(yù)覽的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
在Angular項(xiàng)目使用socket.io實(shí)現(xiàn)通信的方法
這篇文章主要介紹了在Angular項(xiàng)目使用socket.io實(shí)現(xiàn)通信的方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
Angular中ng-repeat與ul li的多層嵌套重復(fù)問(wèn)題
這篇文章主要介紹了Angular中ng-repeat與ul li的多層嵌套重復(fù)問(wèn)題,需要的朋友可以參考下2017-07-07
AngularJS基礎(chǔ) ng-cloak 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-cloak 指令,這里幫大家整理了ng-clock指令的基礎(chǔ)資料,和簡(jiǎn)單的代碼實(shí)例及效果圖,學(xué)習(xí)AngularJS指令的朋友可以參考下2016-08-08
Angularjs 滾動(dòng)加載更多數(shù)據(jù)
AngularJS 通過(guò)新的屬性和表達(dá)式擴(kuò)展了 HTML。本文主要給大家介紹Angularjs 滾動(dòng)加載更多數(shù)據(jù)的相關(guān)知識(shí)，需要的朋友參考下吧2016-03-03
angularjs ui-router中路由的二級(jí)嵌套
本篇文章主要介紹了angularjs ui-router中路由的二級(jí)嵌套，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
不知道大家有沒(méi)有發(fā)現(xiàn)在用AngularJS作為前端搭建個(gè)人博客的時(shí)候，發(fā)現(xiàn)用AngularJs輸出html的時(shí)候，瀏覽器并不解析這些html標(biāo)簽，這里我們需要其顯示angular輸出的html能被瀏覽器解析怎么辦呢？不知道Angularjs如何實(shí)現(xiàn)這種功能的通過(guò)這篇文章來(lái)看看吧。2016-09-09