AngularJS 輸入驗(yàn)證詳解及實(shí)例代碼
AngularJS 輸入驗(yàn)證
AngularJS 表單和控件可以驗(yàn)證輸入的數(shù)據(jù)。
輸入驗(yàn)證
在前面的幾個(gè)章節(jié)中，你已經(jīng)學(xué)到關(guān)于 AngularJS 表單和控件的知識(shí)。
AngularJS 表單和控件可以提供驗(yàn)證功能，并對(duì)用戶輸入的非法數(shù)據(jù)進(jìn)行警告。
注意： 客戶端的驗(yàn)證不能確保用戶輸入數(shù)據(jù)的安全，所以服務(wù)端的數(shù)據(jù)驗(yàn)證也是必須的。
應(yīng)用代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<h2>驗(yàn)證實(shí)例</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<p>用戶名:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用戶名是必須的。</span>
</span>
</p>
<p>郵箱:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">郵箱是必須的。</span>
<span ng-show="myForm.email.$error.email">非法的郵箱地址。</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.doe@gmail.com';
});
</script>
</body>
</html>
運(yùn)行結(jié)果：
驗(yàn)證實(shí)例
用戶名:
郵箱:
注意： HTML 表單屬性 novalidate 用于禁用瀏覽器默認(rèn)的驗(yàn)證。
實(shí)例解析
AngularJS ng-model 指令用于綁定輸入元素到模型中。
模型對(duì)象有兩個(gè)屬性： user 和 email。
我們使用了 ng-show指令， color:red 在郵件是 $dirty 或 $invalid 才顯示。
| 屬性 | 描述 |
|---|---|
| $dirty | 表單有填寫(xiě)記錄 |
| $valid | 字段內(nèi)容合法的 |
| $invalid | 字段內(nèi)容是非法的 |
| $pristine | 表單沒(méi)有填寫(xiě)記錄 |
以上就是對(duì)AngularJS 輸入驗(yàn)證的資料整理，后續(xù)繼續(xù)補(bǔ)充，希望能幫助學(xué)習(xí)的同學(xué)。
相關(guān)文章
AngularJS基礎(chǔ) ng-init 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-init 指令,這里幫大家整理了關(guān)于ng-init 指令的基本知識(shí)資料,并附有簡(jiǎn)單的代碼示例,有需要學(xué)習(xí)的小伙伴可以參考下2016-08-08
走進(jìn)AngularJs之過(guò)濾器（filter）詳解
本篇文章主要介紹了AngularJs之過(guò)濾器（filter）詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
在實(shí)際工作中,我們經(jīng)常需要一個(gè)基于后端API驗(yàn)證值的驗(yàn)證器,下面這篇文章主要給大家介紹了關(guān)于angular異步驗(yàn)證器防抖的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
AngularJS利用Controller完成URL跳轉(zhuǎn)
本文的主要內(nèi)容是介紹在AngularJS中怎樣利用Controller實(shí)現(xiàn)URL跳轉(zhuǎn)，本文給出了實(shí)例代碼，簡(jiǎn)單明了，有需要的可以參考學(xué)習(xí)。2016-08-08
將Angular單項(xiàng)目升級(jí)為多項(xiàng)目的全過(guò)程
有時(shí)候在開(kāi)發(fā)的過(guò)程中發(fā)現(xiàn)一個(gè)Angular項(xiàng)目不太夠用,兩個(gè)獨(dú)立的項(xiàng)目又不太好復(fù)用,這時(shí)便需要將原來(lái)的Angular項(xiàng)目簡(jiǎn)單做個(gè)升級(jí),這篇文章主要給大家介紹了關(guān)于將Angular單項(xiàng)目升級(jí)為多項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2021-11-11
本篇文章主要介紹了Angular之指令Directive系列詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
這篇文章主要介紹了詳解Angular2響應(yīng)式表單，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
Angular統(tǒng)一注入器unified injector簡(jiǎn)化依賴關(guān)系管理
這篇文章主要為大家介紹了Angular統(tǒng)一注入器unified injector簡(jiǎn)化依賴關(guān)系管理的使用方法實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
AngularJS學(xué)習(xí)第一篇 AngularJS基礎(chǔ)知識(shí)
這篇文章主要介紹了AngularJS學(xué)習(xí)第一篇，分享了有關(guān)AngularJS的基礎(chǔ)知識(shí)，主要包括指令、過(guò)濾器等，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
Bootstrap與Angularjs的模態(tài)框?qū)嵗a
這篇文章主要介紹了Bootstrap與Angularjs的模態(tài)框?qū)嵗a,需要的朋友可以參考下2017-08-08