AngularJS入門教程之表單校驗用法示例
本文實例講述了AngularJS表單校驗用法。分享給大家供大家參考，具體如下：
表單數(shù)據(jù)的校驗對于提高WEB安全性意義不大，因為服務(wù)器接收到的請求不一定來自我們的前端頁面，有可能來自別的站點，黑客可以自己做一個表單，把數(shù)據(jù)提交到我們的服務(wù)器（即跨站偽造請求），這樣就繞過了前端頁面的校驗。如果對HTTP協(xié)議比較熟，甚至還可以在程序中手動構(gòu)造一段HTTP請求發(fā)到服務(wù)器，所以服務(wù)器端的數(shù)據(jù)校驗絕對是必不可少的。
WEB前端數(shù)據(jù)校驗的意義在于改善用戶體驗，用戶不用等到將數(shù)據(jù)提交到服務(wù)器后才知道哪些數(shù)據(jù)是不合法的。
使用AngularJS對表單元素進行校驗是相當(dāng)方便的，我們來看一下可以在input元素上使用的所有校驗選項。
1.必填項
驗證某個表單輸入是否已填寫，只要在輸入字段元素上添加HTML5標記required即可：
<input type="text" required />
2. 最小長度
驗證表單輸入的文本長度是否大于某個最小值，在輸入字段上使用AngularJS指令ng-minleng= "{number}"：
<input type="text" ng-minlength="5" />
3. 最大長度
驗證表單輸入的文本長度是否小于或等于某個最大值，在輸入字段上使用AngularJS指令ng-maxlength="{number}"：
<input type="text" ng-maxlength="20" />
4. 模式匹配
使用ng-pattern="/PATTERN/"來確保輸入能夠匹配指定的正則表達式：
<input type="text" ng-pattern="[a-zA-Z]" />
5. 電子郵件
驗證輸入內(nèi)容是否是電子郵件，只要像下面這樣將input的類型設(shè)置為email即可：
<input type="email" name="email" ng-model="user.email" />
6. 數(shù)字
驗證輸入內(nèi)容是否是數(shù)字，將input的類型設(shè)置為number：
<input type="number" name="age" ng-model="user.age" />
7. URL
驗證輸入內(nèi)容是否是URL，將input的類型設(shè)置為 url：
<input type="url" name="homepage" ng-model="user.facebook_url" />
我們看一下具體的一個案例代碼：
<!DOCTYPE html>
<html ng-app="loginMod">
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
<script type="text/javascript" src="angular-1.3.0.14/angular-messages.js"></script>
<title>tutorial06_1</title>
<style>
input.ng-invalid {
border: 1px solid red;
}
input.ng-valid {
border: 1px solid green;
}
</style>
</head>
<body>
<div>
<form name="loginForm" novalidate ng-submit="login()" ng-controller="LoginController">
<div style="width:280px;float:left">
<label>用戶名：</label>
<input type="text" placeholder="請輸入用戶名" name="uname" ng-model="uname" ng-minlength=
3 ng-maxlength=10 required />
</div>
<div class="error" ng-messages="loginForm.uname.$error" style="color:red;">
<div ng-message="required">用戶名不能為空</div>
<div ng-message="minlength">用戶名長度至少為3</div>
<div ng-message="maxlength">用戶名長度不能超過10</div>
</div>
<br/><br/>
<button type="submit">提交</button>
</form>
</div>
<script>
var loginMod = angular.module('loginMod', ['ngMessages']);
loginMod.controller("LoginController",function($scope,$log){
$scope.login = function()
{
$log.info("點擊了按鈕");
}
});
</script>
</body>
</html>
表單校驗作為AngularJs的一個ngMessages模塊封裝在angular-messages.js文件中，我們必須引入它：
<script type="text/javascript" src="angular-1.3.0.14/angular-messages.js">
除此之外還要告訴AngularJs將ngMessages作為應(yīng)用程序的依賴模塊引入，像下面這個樣子：
var loginMod = angular.module('loginMod', ['ngMessages']);
required指定文本框為必輸項，ng-minlength指定最小長度，ng-maxlength指定最大長度，校驗工作是AngularJs內(nèi)部完成的，我們只需要定義不滿足條件時的提示信息：
<div class="error" ng-messages="loginForm.uname.$error" style="color:red;"> <div ng-message="required">用戶名不能為空</div> <div ng-message="minlength">用戶名長度至少為3</div> <div ng-message="maxlength">用戶名長度不能超過10</div> </div>
最后我們在瀏覽器中看一下效果：
我們還可以把提示信息寫在一個單獨的errors.html文件中：
<div ng-message="required">用戶名不能為空</div> <div ng-message="minlength">用戶名長度至少為3</div> <div ng-message="maxlength">用戶名長度不能超過10</div>
然后在頁面中使用ng-messages-include屬性引入這些信息：
<div class="error" ng-messages="loginForm.uname.$error" style="color:red;" ng-messages-include="errors/errors.html"> </div>
AngularJS源碼可點擊此處本站下載。
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于Angular項目如何升級至Angular6的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-09-09
最近工作中會經(jīng)常遇到一些公用提示，使用框架自帶很多時候不方便所以便自己編寫了一個公共提示模塊，下面這篇文章主要介紹了利用Angular.js編寫公共提示模塊的方法教程，需要的朋友可以參考借鑒，下面來一起看看吧。2017-05-05
詳解Angular結(jié)合zTree異步加載節(jié)點數(shù)據(jù)
本篇文章主要給大家分享了Angular結(jié)合zTree異步加載節(jié)點數(shù)據(jù)的難點以及方法，有這方面需求的朋友參考下吧。2018-01-01
本文通過實例代碼給大家介紹了Angularjs實現(xiàn)上傳圖片預(yù)覽功能，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-09-09
這篇文章主要介紹了AngularJS入門教程之Hello World!,本文用經(jīng)典的應(yīng)用程序“Hello World!”來講解AngularJS,要的朋友可以參考下2014-12-12
本篇文章主要介紹了angular中不同的組件間傳值與通信的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
AngularJS入門教程之 XMLHttpRequest實例講解
本文主要講解 AngularJS XMLHttpRequest,這里給大家整理相關(guān)資料并提供實例代碼,有需要的小伙伴參考下2016-07-07
完美解決UI-Grid表格元素中多個空格顯示為一個空格的問題
下面小編就為大家?guī)硪黄昝澜鉀QUI-Grid表格元素中多個空格顯示為一個空格的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要介紹了AngularJS中使用HTML5手機攝像頭拍照的相關(guān)資料,需要的朋友可以參考下2016-02-02
Angularjs實現(xiàn)mvvm式的選項卡示例代碼
每位Web開發(fā)者應(yīng)該都知道，選項卡是現(xiàn)代web網(wǎng)頁中最常用的效果之一，所以本文重點是用angularjs這個非?；餸vvm框架，實現(xiàn)選項卡效果。有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-09-09