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)不通過則返回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>
<!-- 通過識(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教程之簡(jiǎn)單應(yīng)用程序示例
本文主要介紹AngularJS簡(jiǎn)單應(yīng)用程序,這里提供了詳細(xì)的流程和代碼程序，有需要的小伙伴可以參考下2016-08-08
Angular5整合富文本編輯器TinyMCE的方法(漢化+上傳)
TinyMCE是一個(gè)輕量級(jí)的富文本編輯器，相對(duì)于CK編輯器更加精簡(jiǎn)，但必須滿足絕大部分場(chǎng)景的需要。這篇文章主要介紹了Angular5整合富文本編輯器TinyMCE（漢化+上傳）的相關(guān)知識(shí),需要的朋友可以參考下2020-05-05
AngularJS全局scope與Isolate scope通信用法示例
這篇文章主要介紹了AngularJS全局scope與Isolate scope通信用法,結(jié)合格式分析了全局scope和directive本地scope相關(guān)功能、通信用法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-11-11
本文主要介紹AngularJS 依賴注入的知識(shí)，這里整理了相關(guān)的基礎(chǔ)知識(shí)，并附示例代碼和實(shí)現(xiàn)效果圖，有興趣的小伙伴可以參考下
2016-08-08 
Angularjs 手寫日歷的實(shí)現(xiàn)代碼（不用插件）
本篇文章介紹了Angularjs 手寫日歷的實(shí)現(xiàn)代碼（不用插件），整理了詳細(xì)的代碼，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-10-10 
本文主要介紹了Angular動(dòng)態(tài)組件，對(duì)此感興趣的同學(xué)，可以親自實(shí)驗(yàn)一下。
2021-05-05 
在Angular中使用依賴注入，可以幫助我們實(shí)現(xiàn)松耦合，可以說只有在組件中使用依賴注入才能真正的實(shí)現(xiàn)可重用的組件。
2017-06-06 
這篇文章主要介紹了AngularJS表單編輯提交功能實(shí)例,本文講解如何修改表單的默認(rèn)值,需要的朋友可以參考下
2015-02-02 
Angular4自制一個(gè)市縣二級(jí)聯(lián)動(dòng)組件示例
本篇文章主要介紹了Angular4自制一個(gè)市縣二級(jí)聯(lián)動(dòng)組件示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-11-11