欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJS入門教程之表單校驗(yàn)用法示例

 更新時(shí)間：2016年11月02日 09:57:28   作者：Rongbo_J  
這篇文章主要介紹了AngularJS表單校驗(yàn)用法,結(jié)合實(shí)例形式分析了AngularJS各種常見的表單校驗(yàn)功能及使用技巧,需要的朋友可以參考下

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

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

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

使用AngularJS對表單元素進(jìn)行校驗(yàn)是相當(dāng)方便的，我們來看一下可以在input元素上使用的所有校驗(yàn)選項(xiàng)。

1.必填項(xiàng)

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

<input type="text" required />

2. 最小長度

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

<input type="text" ng-minlength="5" />

3. 最大長度

驗(yàn)證表單輸入的文本長度是否小于或等于某個(gè)最大值，在輸入字段上使用AngularJS指令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" />

我們看一下具體的一個(gè)案例代碼：

<!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("點(diǎn)擊了按鈕");
    }
  });
</script>
</body>
</html>

表單校驗(yàn)作為AngularJs的一個(gè)ngMessages模塊封裝在angular-messages.js文件中，我們必須引入它：

<script type="text/javascript" src="angular-1.3.0.14/angular-messages.js">

除此之外還要告訴AngularJs將ngMessages作為應(yīng)用程序的依賴模塊引入，像下面這個(gè)樣子：

var loginMod = angular.module('loginMod', ['ngMessages']);

required指定文本框?yàn)楸剌旐?xiàng)，ng-minlength指定最小長度，ng-maxlength指定最大長度，校驗(yàn)工作是AngularJs內(nèi)部完成的，我們只需要定義不滿足條件時(shí)的提示信息：

<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>

最后我們在瀏覽器中看一下效果：

我們還可以把提示信息寫在一個(gè)單獨(dú)的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源碼可點(diǎn)擊此處本站下載。

希望本文所述對大家AngularJS程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評論