腳本之家服務器常用軟件

快捷導航

AngularJS入門教程之表單校驗用法示例

更新時間：2016年11月02日 09:57:28 作者：Rongbo_J

這篇文章主要介紹了AngularJS表單校驗用法,結(jié)合實例形式分析了AngularJS各種常見的表單校驗功能及使用技巧,需要的朋友可以參考下

本文實例講述了AngularJS表單校驗用法。分享給大家供大家參考，具體如下：

表單數(shù)據(jù)的校驗對于提高WEB安全性意義不大，因為服務器接收到的請求不一定來自我們的前端頁面，有可能來自別的站點，黑客可以自己做一個表單，把數(shù)據(jù)提交到我們的服務器（即跨站偽造請求），這樣就繞過了前端頁面的校驗。如果對HTTP協(xié)議比較熟，甚至還可以在程序中手動構(gòu)造一段HTTP請求發(fā)到服務器，所以服務器端的數(shù)據(jù)校驗絕對是必不可少的。

WEB前端數(shù)據(jù)校驗的意義在于改善用戶體驗，用戶不用等到將數(shù)據(jù)提交到服務器后才知道哪些數(shù)據(jù)是不合法的。

使用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/"來確保輸入能夠匹配指定的正則表達式：

<input type="text" ng-pattern="[a-zA-Z]" />

5. 電子郵件

驗證輸入內(nèi)容是否是電子郵件，只要像下面這樣將input的類型設置為email即可：

<input type="email" name="email" ng-model="user.email" />

6. 數(shù)字

驗證輸入內(nèi)容是否是數(shù)字，將input的類型設置為number：

<input type="number" name="age" ng-model="user.age" />

7. URL

驗證輸入內(nèi)容是否是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內(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程序設計有所幫助。

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

AngularJS入門教程之表單校驗用法示例

相關文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具