AngularJS使用ngMessages進(jìn)行表單驗(yàn)證
AngularJS 誕生于2009年，由Misko Hevery 等人創(chuàng)建，后為Google所收購。是一款優(yōu)秀的前端JS框架，已經(jīng)被用于Google的多款產(chǎn)品當(dāng)中。AngularJS有著諸多特性，最為核心的是：MVVM、模塊化、自動(dòng)化雙向數(shù)據(jù)綁定、語義化標(biāo)簽、依賴注入等等。
名稱為"ngMessages"的module，通過npm install angular-messages進(jìn)行安裝。在沒有使用ngMessages之前，我們可能這樣寫驗(yàn)證：
<form name="userForm"> <input type="text" name="username" ng-model="user.username" ng-minlength="3" ng-maxlength="8" required> <p ng-show="userForm.username.$error.minlength">Username is too short.</p> <p ng-show="userForm.username.$error.maxlength">Username is too long.</p> <p ng-show="userForm.username.$error.required">Your username is required.</p> </form>
以上，列舉了每種可能的驗(yàn)證失敗，并且手工編寫是否顯示錯(cuò)誤提示信息。
有了"ngMessages"這個(gè)module,大致這么寫：
<div class="help-block" ng-messages="userForm.name.$error" ng-if="userForm.name.$touched"> <p ng-message="minlength">用戶名最小長度5</p> <p ng-message="maxlength">用戶名最大長度10</p> <p ng-message="required">用戶名必填</p> </div>
ngMessages為我們自動(dòng)判斷顯示哪種錯(cuò)誤。
使用ngMessages的幾個(gè)關(guān)鍵點(diǎn)：
● npm install angular-messages
● 引用：angular-messages.js
● 依賴：angular.module('app',['ngMessages'])
這里有一個(gè)簡單的Demo,文件結(jié)構(gòu)：
node_modules/
app.js
emailmessages.html
index.html
安裝如下：
npm install bootstrap
npm install angular
npm install angular-messages
==index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/>
<style>
body{
padding-top: 50px;
}
</style>
</head>
<body class="container" ng-app="app" ng-controller="MainCtrl as main">
<form name="userForm" novalidate>
<div class="form-group" ng-class="{'has-error':userForm.name.$touched && userForm.name.$invalid}">
<label>用戶名</label>
<input type="text" name="name" class="form-control"
ng-model="main.name"
ng-minlength="5"
ng-maxlength="10" required/>
<div class="help-block" ng-messages="userForm.name.$error" ng-if="userForm.name.$touched">
<p ng-message="minlength">用戶名最小長度5</p>
<p ng-message="maxlength">用戶名最大長度10</p>
<p ng-message="required">用戶名必填</p>
</div>
</div>
<div class="form-group" ng-class="{'has-error':userForm.email.$touched && userForm.email.$invalid}">
<label>郵箱</label>
<input type="email" name="email" class="form-control"
ng-model="main.email"
ng-minlength="5"
ng-maxlength="20" required/>
<div class="help-block" ng-messages="userForm.email.$error" ng-if="userForm.email.$touched">
<div ng-messages-include="emailmessages.html"></div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-danger">提交</button>
</div>
<pre>{{userForm.name.$error}}</pre>
<pre>{{userForm.email.$error}}</pre>
</form>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-messages/angular-messages.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
angular.module('app',['ngMessages'])
.controller('MainCtrl', MainCtrl);
function MainCtrl(){
}
emailmessages.html
把有關(guān)email的表單驗(yàn)證放在這里，通過<div ng-messages-include="emailmessages.html"></div>顯示到頁面某個(gè)位置上。
<p ng-message="required">郵箱必填</p> <p ng-message="minlength">郵箱長度太短</p> <p ng-message="maxlength">郵箱長度太長</p> <p ng-message="email">郵箱無效</p>
ps：常用的表單驗(yàn)證指令
1. 必填項(xiàng)驗(yàn)證
某個(gè)表單輸入是否已填寫，只要在輸入字段元素上添加HTML5標(biāo)記required即可：
<input type="text" required />
2. 最小長度
驗(yàn)證表單輸入的文本長度是否大于某個(gè)最小值，在輸入字段上使用指令ng-minleng= "{number}"：
<input type="text" ng-minlength="5" />
3. 最大長度
驗(yàn)證表單輸入的文本長度是否小于或等于某個(gè)最大值，在輸入字段上使用指令ng-maxlength="{number}"：
<input type="text" ng-maxlength="20" />
4. 模式匹配
使用ng-pattern="/PATTERN/"來確保輸入能夠匹配指定的正則表達(dá)式：
<input type="text" ng-pattern="/[a-zA-Z]/" />
5. 電子郵件
驗(yàn)證輸入內(nèi)容是否是電子郵件，只要像下面這樣將input的類型設(shè)置為email即可：
<input type="email" name="email" ng-model="user.email" />
6. 數(shù)字
驗(yàn)證輸入內(nèi)容是否是數(shù)字，將input的類型設(shè)置為number：
<input type="number" name="age" ng-model="user.age" />
7. URL
驗(yàn)證輸入內(nèi)容是否是URL，將input的類型設(shè)置為 url：
<input type="url" name="homepage" ng-model="user.facebook_url" />
- jquery validate.js表單驗(yàn)證的基本用法入門
- js 常用正則表達(dá)式表單驗(yàn)證代碼
- JavaScript表單驗(yàn)證完美代碼
- JavaScript 表單驗(yàn)證正則表達(dá)式大全[推薦]
- AngularJS實(shí)現(xiàn)表單驗(yàn)證
- javascript制作的簡單注冊(cè)模塊表單驗(yàn)證
- js正則表達(dá)式注冊(cè)頁面表單驗(yàn)證
- jquery表單驗(yàn)證插件（jquery.validate.js）的3種使用方式
- JavaScript表單驗(yàn)證實(shí)例之驗(yàn)證表單項(xiàng)是否為空
- JavaScript實(shí)現(xiàn)簡單表單驗(yàn)證案例
相關(guān)文章
AngularJS 實(shí)現(xiàn)點(diǎn)擊按鈕獲取驗(yàn)證碼功能實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了AngularJS 實(shí)現(xiàn)點(diǎn)擊按鈕獲取驗(yàn)證碼功能，代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-07-07
Angular4學(xué)習(xí)筆記之根模塊與Ng模塊
這篇文章主要介紹了Angular4學(xué)習(xí)筆記之根模塊與Ng模塊，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
本篇文章主要介紹了Angular4 ElementRef的應(yīng)用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
angular 基于ng-messages的表單驗(yàn)證實(shí)例
本篇文章主要介紹了angular 基于ng-messages的表單驗(yàn)證實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
本文主要介紹AngularJS 路由與多視圖詳解，這里整理了相關(guān)資料及示例代碼，詳細(xì)說明了在開發(fā)過程中如何應(yīng)用，有興趣的朋友可以看下2016-08-08![angular報(bào)錯(cuò)can't resolve all parameters for []的解決](http://img.jbzj.com/images/xgimg/bcimg5.png)
angular報(bào)錯(cuò)can't resolve all parameters&nb
這篇文章主要介紹了angular報(bào)錯(cuò)can't resolve all parameters for []的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Angular項(xiàng)目如何使用攔截器?httpClient?請(qǐng)求響應(yīng)處理
這篇文章主要介紹了Angular項(xiàng)目簡單使用攔截器httpClient請(qǐng)求響應(yīng)處理,目前我的Angular版本是Angular?17.3,版本中實(shí)現(xiàn)請(qǐng)求和響應(yīng)的攔截處理了,這種機(jī)制非常適合添加如身份驗(yàn)證頭、錯(cuò)誤統(tǒng)一處理、日志記錄等功能,需要的朋友可以參考下2024-06-06
高效利用Angular中內(nèi)置服務(wù)$http、$location等
這篇文章主要介紹了如何高效利用Angular中內(nèi)置服務(wù)，大家知道的Angular內(nèi)置服務(wù)有哪些，感興趣的小伙伴們可以參考一下2016-03-03
今天小編就為大家分享一篇關(guān)于Angular使用Restful的增刪改，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2018-12-12
Angular2學(xué)習(xí)教程之ng中變更檢測(cè)問題詳解
這篇文章主要給大家介紹了Angular2學(xué)習(xí)教程之ng中變更檢測(cè)問題的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-05-05