AngularJS使用ngMessages進(jìn)行表單驗(yàn)證

更新時(shí)間：2015年12月27日 12:22:10 作者：Darren Ji

這篇文章主要介紹了AngularJS使用ngMessages進(jìn)行表單驗(yàn)證的相關(guān)資料,需要的朋友可以參考下

AngularJS 誕生于2009年，由Misko Hevery 等人創(chuàng)建，后為Google所收購(gòu)。是一款優(yōu)秀的前端JS框架，已經(jīng)被用于Google的多款產(chǎn)品當(dāng)中。AngularJS有著諸多特性，最為核心的是：MVVM、模塊化、自動(dòng)化雙向數(shù)據(jù)綁定、語(yǔ)義化標(biāo)簽、依賴(lài)注入等等。

名稱(chēng)為"ngMessages"的module，通過(guò)npm install angular-messages進(jìn)行安裝。在沒(méi)有使用ngMessages之前，我們可能這樣寫(xiě)驗(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)證失敗，并且手工編寫(xiě)是否顯示錯(cuò)誤提示信息。

有了"ngMessages"這個(gè)module,大致這么寫(xiě)：

<div class="help-block" ng-messages="userForm.name.$error" ng-if="userForm.name.$touched">
<p ng-message="minlength">用戶(hù)名最小長(zhǎng)度5</p>
<p ng-message="maxlength">用戶(hù)名最大長(zhǎng)度10</p>
<p ng-message="required">用戶(hù)名必填</p>
</div>

ngMessages為我們自動(dòng)判斷顯示哪種錯(cuò)誤。

使用ngMessages的幾個(gè)關(guān)鍵點(diǎn)：

● npm install angular-messages
● 引用：angular-messages.js
● 依賴(lài)：angular.module('app',['ngMessages'])

這里有一個(gè)簡(jiǎn)單的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>用戶(hù)名</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">用戶(hù)名最小長(zhǎng)度5</p>
<p ng-message="maxlength">用戶(hù)名最大長(zhǎng)度10</p>
<p ng-message="required">用戶(hù)名必填</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)證放在這里，通過(guò)<div ng-messages-include="emailmessages.html"></div>顯示到頁(yè)面某個(gè)位置上。

<p ng-message="required">郵箱必填</p>
<p ng-message="minlength">郵箱長(zhǎng)度太短</p>
<p ng-message="maxlength">郵箱長(zhǎng)度太長(zhǎng)</p>
<p ng-message="email">郵箱無(wú)效</p>

ps：常用的表單驗(yàn)證指令

1. 必填項(xiàng)驗(yàn)證

某個(gè)表單輸入是否已填寫(xiě)，只要在輸入字段元素上添加HTML5標(biāo)記required即可：

復(fù)制代碼代碼如下:

2. 最小長(zhǎng)度

驗(yàn)證表單輸入的文本長(zhǎng)度是否大于某個(gè)最小值，在輸入字段上使用指令ng-minleng= "{number}"：

復(fù)制代碼代碼如下:

3. 最大長(zhǎng)度

驗(yàn)證表單輸入的文本長(zhǎng)度是否小于或等于某個(gè)最大值，在輸入字段上使用指令ng-maxlength="{number}"：

復(fù)制代碼代碼如下:

4. 模式匹配

使用ng-pattern="/PATTERN/"來(lái)確保輸入能夠匹配指定的正則表達(dá)式：