本文執行個體講述了AngularJS表單校正用法。分享給大家供大家參考，具體如下：
表單資料的校正對於提高WEB安全性意義不大，因為伺服器接收到的請求不一定來自我們的前端頁面，有可能來自別的網站，駭客可以自己做一個表單，把資料提交到我們的伺服器（即跨站偽造請求），這樣就繞過了前端頁面的校正。如果對HTTP協議比較熟，甚至還可以在程式中手動構造一段HTTP請求發到伺服器，所以伺服器端的資料校正絕對是必不可少的。
WEB前端資料校正的意義在於改善使用者體驗，使用者不用等到將資料提交到伺服器後才知道哪些資料是不合法的。
使用AngularJS對錶單元素進行校正是相當方便的，我們來看一下可以在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/"來確保輸入能夠匹配指定的Regex：
<input type="text" ng-pattern="[a-zA-Z]" />
5. 電子郵件
驗證輸入內容是否是電子郵件，只要像下面這樣將input的類型設定為email即可：
<input type="email" name="email" ng-model="user.email" />
6. 數字
驗證輸入內容是否是數字，將input的類型設定為number：
<input type="number" name="age" ng-model="user.age" />
7. URL
驗證輸入內容是否是URL，將input的類型設定為 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作為應用程式的相依模組引入，像下面這個樣子：
var loginMod = angular.module('loginMod', ['ngMessages']);
required指定文字框為必輸項，ng-minlength指定最小長度，ng-maxlength指定最大長度，校正工作是AngularJs內部完成的，我們只需要定義不滿足條件時的提示資訊：
<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程式設計有所協助。
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
