快捷導(dǎo)航

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 類(lèi)

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:類(lèi)似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 類(lèi)</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)，但必須滿(mǎ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中的作用域,結(jié)合實(shí)例形式較為詳細(xì)的分析了AngularJS涉及作用域的相關(guān)問(wèn)題與注意事項(xiàng),需要的朋友可以參考下
2018-05-05