AngularJS 誕生於2009年，由Misko Hevery 等人建立，後為Google所收購。是一款優秀的前端JS架構，已經被用於Google的多款產品當中。AngularJS有著諸多特性，最為核心的是：MVVM、模組化、自動化雙向資料繫結、語義化標籤、依賴注入等等。
名稱為"ngMessages"的module，通過npm install angular-messages進行安裝。在沒有使用ngMessages之前，我們可能這樣寫驗證：
<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>
以上，列舉了每種可能的驗證失敗，並且手工編寫是否顯示錯誤提示資訊。
有了"ngMessages"這個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為我們自動判斷顯示哪種錯誤。
使用ngMessages的幾個關鍵點：
● npm install angular-messages
● 引用：angular-messages.js
● 依賴：angular.module('app',['ngMessages'])
這裡有一個簡單的Demo,檔案結構：
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
把有關email的表單驗證放在這裡，通過<div ng-messages-include="emailmessages.html"></div>顯示到頁面某個位置上。
<p ng-message="required">郵箱必填</p><p ng-message="minlength">郵箱長度太短</p><p ng-message="maxlength">郵箱長度太長</p><p ng-message="email">郵箱無效</p>
ps：常用的表單驗證指令
1. 必填項驗證
某個表單輸入是否已填寫，只要在輸入欄位元素上添加HTML5標記required即可：
2. 最小長度
驗證表單輸入的文本長度是否大於某個最小值，在輸入欄位上使用指令ng-minleng= "{number}"：
3. 最大長度
驗證表單輸入的文本長度是否小於或等於某個最大值，在輸入欄位上使用指令ng-maxlength="{number}"：
4. 模式比對
使用ng-pattern="/PATTERN/"來確保輸入能夠匹配指定的Regex：
5. 電子郵件
驗證輸入內容是否是電子郵件，只要像下面這樣將input的類型設定為email即可：
6. 數字
驗證輸入內容是否是數字，將input的類型設定為number：
7. URL
驗證輸入內容是否是URL，將input的類型設定為 url：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
