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

AngularJS學習筆記之表單驗證功能實例詳解

 更新時間：2017年07月06日 11:42:22   作者：Annexu1991  
這篇文章主要介紹了AngularJS學習筆記之表單驗證功能,結合實例形式分析了AngularJS針對表單的校驗、監(jiān)控等相關操作技巧,需要的朋友可以參考下

本文實例講述了AngularJS學習筆記之表單驗證功能。分享給大家供大家參考，具體如下：

一、執(zhí)行基本的表單驗證

<!DOCTYPE html>
<html ng-app='exampleApp'>
  <head>
    <meta charset="UTF-8">
    <title>表單</title>
    <script src="../../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap-theme.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
    <script type="text/javascript">
      angular.module('exampleApp',[])
      .controller('defaultCtrl',function($scope){
        $scope.addUser=function(userDetails){
          $scope.message=userDetails.name+"("+userDetails.email+")("+userDetails.agreed+")"
        }
        $scope.message='Ready';
      });
    </script>
  </head>
  <body>
    <div id="todoPanel" class="panel" ng-controller='defaultCtrl'>
      <form name='myForm' novalidate ng-submit='addUser(newUser)'>
        <div class="well">
          <div class="form-group">
            <label for="">Name:</label>
            <input type="text" name='userName' class="form-control" required ng-model='newUser.name'/>
          </div>
          <div class="form-group">
            <label for="">Email:</label>
            <input type="email" name='userEmail' class="form-control" required ng-model='newUser.email'/>
          </div>
          <div class="checkbox">
            <label for="">
              <input type="checkbox" ng-model='newUser.agreed' required />
              I agree to the terms and conditions
            </label>
          </div>
          <button type="submit" class="btn btn-primary btn-block" ng-disabled='myForm.$invalid'>OK</button>
        </div>
        <div class="well">
          message:{{message}}
          <div>
            valid:{{myForm.$valid}}
          </div>
        </div>
      </form>
    </div>
  </body>
</html>

在上述例子中，該HTML文檔被瀏覽器加載時的初始狀態(tài)是：有三個input元素以及一個被禁用且無法單擊的ok按鈕，當在文本框中輸入值并且勾選了復選框之后，按鈕將變?yōu)榭捎?，從而允許用戶提交表單。

1、增加表單元素

（1）首先需要在form上設置一個name屬性
（2）需要給表單增添novalidate屬性，該屬性用于告訴瀏覽器不要自己校驗表單，從而允許AngularJS不受干擾的工作
（3）ng-submit指令為表單提交事件指定一個自定義的響應行為，將在用戶提交表單時觸發(fā)

2、使用校驗屬性

（1）為各個想要驗證的元素添加name屬性，這樣可以訪問到Angularjs所提供的各種特殊的變量
（2）設置type屬性，這個屬性指定了input元素將要接收的數(shù)據(jù)類型，這些類型告訴angularjs需要什么樣的校驗
（3）指定required屬性，這個屬性指定用戶必須為待校驗的表單提供一個輸入值
（4）在本例中input元素都使用ng-model指令來設置隱式定義的newUser對象的一個屬性

3、監(jiān)控表單的有效性

AngularJS中用來替換標準表單元素的指令定義了一些特殊的變量，可以用來檢查表單中各個元素或整個表單的有效性狀態(tài)。

$pristine：如果用戶沒有與元素/表單產(chǎn)生交互，則返回true
$dirty：如果用戶與元素/表單產(chǎn)生過交互，則返回true
$valid：當元素/表單內(nèi)容的校驗結果為有效時則返回true
$invalid：當元素/表單內(nèi)容的校驗結果為無效時則返回true
$error：提供校驗錯誤的詳情信息

二、提供表單校驗反饋信息

在上面的例子中展示的效果是比較簡單的，ok按鈕將一直被禁用，直到所有的input元素可用，以阻止用戶輸入錯誤格式的或未填完的數(shù)據(jù)。在接下來我們將演示AngularJS為報告實時的校驗信息

1、使用css提供校驗反饋信息

ng-pristine：用戶未曾交互過的元素被添加到這個類
ng-dirty：用戶曾經(jīng)交互過的元素被添加到這個類
ng-valid：校驗結果為有效的元素在這個類中
ng-invalid：校驗結果為無效的元素在這個類中

下面我們來看具體用法：

<!DOCTYPE html>
<html ng-app='exampleApp'>
  <head>
    <meta charset="UTF-8">
    <title>表單</title>
    <script src="../../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap-theme.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
    <script type="text/javascript">
      angular.module('exampleApp',[])
      .controller('defaultCtrl',function($scope){
        $scope.addUser=function(userDetails){
          $scope.message=userDetails.name+"("+userDetails.email+")("+userDetails.agreed+")"
        }
        $scope.message='Ready';
      });
    </script>
    <style type="text/css">
      form .ng-invalid.ng-dirty{background-color: lightpink;}
      form .ng-valid.ng-dirty{background-color: lightgreen;}
      span.summary.ng-invalid{color: red;font-weight: bold;}
      span.summary.ng-valid{color: green;}
    </style>
  </head>
  <body>
    <div id="todoPanel" class="panel" ng-controller='defaultCtrl'>
      <form name='myForm' novalidate ng-submit='addUser(newUser)'>
        <div class="well">
          <div class="form-group">
            <label for="">Name:</label>
            <input type="text" name='userName' class="form-control" required ng-model='newUser.name'/>
          </div>
          <div class="form-group">
            <label for="">Email:</label>
            <input type="email" name='userEmail' class="form-control" required ng-model='newUser.email'/>
          </div>
          <div class="checkbox">
            <label for="">
              <input type="checkbox" ng-model='newUser.agreed' required />
              I agree to the terms and conditions
            </label>
          </div>
          <button type="submit" class="btn btn-primary btn-block" ng-disabled='myForm.$invalid'>OK</button>
        </div>
        <div class="well">
          message:{{message}}
          <div>
            valid:
            <span class="summary" ng-class="myForm.$valid?'ng-valid':'ng-invalid'">
              {{myForm.$valid}}
            </span>
          </div>
        </div>
      </form>
    </div>
  </body>
</html>

在上述例子中，我們定義了四個樣式，頭兩個樣式用于選擇屬于ng-dirty類成員的元素，僅在用戶與之交互后應用到相應元素上。內(nèi)容有效的元素是ng-valid類的成員，會被渲染為淡綠色背景，內(nèi)容無效的元素是ng-invalid類的成員，會被渲染為淡粉色背景

2、使用特殊變量來提供反饋信息

<!DOCTYPE html>
<html ng-app='exampleApp'>
  <head>
    <meta charset="UTF-8">
    <title>表單</title>
    <script src="../../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap-theme.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
    <script type="text/javascript">
      angular.module('exampleApp',[])
      .controller('defaultCtrl',function($scope){
        $scope.addUser=function(userDetails){
          $scope.message=userDetails.name+"("+userDetails.email+")("+userDetails.agreed+")"
        }
        $scope.message='Ready';
      });
    </script>
    <style type="text/css">
      form .ng-invalid-required.ng-dirty{background-color: lightpink;}
      form .ng-invalid-email.ng-dirty{background-color: lightgoldenrodyellow;}
      form .ng-valid.ng-dirty{background-color: lightgreen;}
      span.summary.ng-invalid{color: red;font-weight: bold;}
      span.summary.ng-valid{color: green;}
      div.error{color:red;font-weight: bold;}
    </style>
  </head>
  <body>
    <div id="todoPanel" class="panel" ng-controller='defaultCtrl'>
      <form name='myForm' novalidate ng-submit='addUser(newUser)'>
        <div class="well">
          <div class="form-group">
            <label for="">Email:</label>
            <input type="email" name='userEmail' class="form-control" required ng-model='newUser.email'/>
            <div class="error" ng-show="myForm.userEmail.$invalid&&myForm.userEmail.$dirty">
              <span ng-show="myForm.userEmail.$error.email">
                please enter a valid email address
              </span>
              <span ng-show="myForm.userEmail.$error.required">
                please enter a value
              </span>
            </div>
          </div>
          <button type="submit" class="btn btn-primary btn-block" ng-disabled='myForm.$invalid'>OK</button>
        </div>
      </form>
    </div>
  </body>
</html>

在本例中新增了一個新的div元素用于給用戶顯示校驗提示信息，新的div元素的可見性是受ng-show指令控制的，將會在input元素被輸入值，且輸入值未通過校驗時顯示該元素。這里是聯(lián)合使用form元素的name值和input的name值來訪問input元素的。在這個例子中，我們使用特殊校驗變量和其他指令聯(lián)合使用以增強用戶體驗。但是這樣可能會使頁面增加大量的相同冗余信息的元素，接下來我們做簡化

<!DOCTYPE html>
<html ng-app='exampleApp'>
  <head>
    <meta charset="UTF-8">
    <title>表單</title>
    <script src="../../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap-theme.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
    <script type="text/javascript">
      angular.module('exampleApp',[])
      .controller('defaultCtrl',function($scope){
        $scope.addUser=function(userDetails){
          $scope.message=userDetails.name+"("+userDetails.email+")("+userDetails.agreed+")"
        }
        $scope.message='Ready';
        $scope.getError=function(error){
          if(angular.isDefined(error)){
            if(error.required){
              return 'please enter a value';
            }else if(error.email){
              return 'please enter a valid email address';
            }
          }
        }
      });
    </script>
    <style type="text/css">
      form .ng-invalid-required.ng-dirty{background-color: lightpink;}
      form .ng-invalid-email.ng-dirty{background-color: lightgoldenrodyellow;}
      form .ng-valid.ng-dirty{background-color: lightgreen;}
      span.summary.ng-invalid{color: red;font-weight: bold;}
      span.summary.ng-valid{color: green;}
      div.error{color:red;font-weight: bold;}
    </style>
  </head>
  <body>
    <div id="todoPanel" class="panel" ng-controller='defaultCtrl'>
      <form name='myForm' novalidate ng-submit='addUser(newUser)'>
        <div class="well">
          <div class="form-group">
            <label for="">Email:</label>
            <input type="email" name='userEmail' class="form-control" required ng-model='newUser.email'/>
            <div class="error" ng-show="myForm.userEmail.$invalid&&myForm.userEmail.$dirty">
              {{getError(myForm.userEmail.$error)}}
            </div>
          </div>
          <button type="submit" class="btn btn-primary btn-block" ng-disabled='myForm.$invalid'>OK</button>
        </div>
      </form>
    </div>
  </body>
</html>

更多關于AngularJS相關內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結》、《AngularJS入門與進階教程》及《AngularJS MVC架構總結》

希望本文所述對大家AngularJS程序設計有所幫助。

相關文章

  • angular實現(xiàn)導航菜單切換

    angular實現(xiàn)導航菜單切換

    這篇文章主要為大家詳細介紹了angular實現(xiàn)導航菜單切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-03-03
  • 簡述AngularJS的控制器的使用

    簡述AngularJS的控制器的使用

    這篇文章主要介紹了AngularJS的控制器的使用,文中給出了具體的用于HTML中的對象示例,需要的朋友可以參考下
    2015-06-06
  • Angular 4中如何顯示內(nèi)容的CSS樣式示例代碼

    Angular 4中如何顯示內(nèi)容的CSS樣式示例代碼

    這篇文章主要給大家介紹了關于Angular 4中如何顯示內(nèi)容的CSS樣式的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。
    2017-11-11
  • Angular中的結構指令模式及使用詳解

    Angular中的結構指令模式及使用詳解

    這篇文章主要為大家介紹了Angular中的結構指令模式及使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-08-08
  • 詳解在Angular4中使用ng2-baidu-map的方法

    詳解在Angular4中使用ng2-baidu-map的方法

    這篇文章主要介紹了在Angular4中使用ng2-baidu-map的方法，本文分步驟給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-06-06
  • AngularJS 過濾器的簡單實例

    AngularJS 過濾器的簡單實例

    本文主要介紹AngularJS 過濾器,這里提供詳細了AngularJS 過濾器詳細資料,并提供簡單實例,有需要的朋友可以參考下
    2016-07-07
  • angularjs使用gulp-uglify壓縮后執(zhí)行報錯的解決方法

    angularjs使用gulp-uglify壓縮后執(zhí)行報錯的解決方法

    下面小編就為大家分享一篇angularjs使用gulp-uglify壓縮后執(zhí)行報錯的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • angularJs中$http獲取后臺數(shù)據(jù)的實例講解

    angularJs中$http獲取后臺數(shù)據(jù)的實例講解

    今天小編就為大家分享一篇angularJs中$http獲取后臺數(shù)據(jù)的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • Angular懶加載機制刷新后無法回退的快速解決方法

    Angular懶加載機制刷新后無法回退的快速解決方法

    使用oclazyload懶加載angular的模塊,刷新頁面后,單擊回退按鈕無法返回上一個頁面.怎么回事呢？下面小編給大家?guī)砹薬ngular懶加載機制刷新后無法回退的快速解決方法，非常不錯，感興趣的朋友參考下
    2016-08-08
  • AngularJS基礎學習筆記之指令

    AngularJS基礎學習筆記之指令

    指令（Directives）是所有AngularJS應用最重要的部分。盡管AngularJS已經(jīng)提供了非常豐富的指令，但還是經(jīng)常需要創(chuàng)建應用特定的指令。這篇教程會為你講述如何自定義指令，以及介紹如何在實際項目中使用。
    2015-05-05

最新評論