AngularJS前端頁面操作使用者修改密碼功能的範例程式碼詳解

這篇文章主要介紹了AngularJS前端頁面操作之用戶修改密碼功能,結合具體實例形式分析了AngularJS針對前端用戶修改密碼的判斷操作實現技巧,需要的朋友可以參考下

本文實例講述了AngularJS前端頁面操作之用戶修改密碼功能。分享給大家供大家參考，具體如下：

最近在做前端設計，主要使用的知識有AngularJS和nodejs來進行頁面顯示和資料請求、處理等工作。在設計頁面例如忘記密碼時，發現一個有效的設計想法是很重要的。

就以修改密碼為例，要將提示訊息友好的展示給用戶，明確告訴用戶在操作的過程中那部分有問題，這需要定義詳細的變數以及能在頁面的不同位置顯示資訊。下面的程式碼是自己寫的一個簡單例子，記錄學習進程。

changePwd

var app = angular.module("myapp",[]);
app.controller('changPwdCtrl',function($scope){
  $scope.name = "xiaozhang";
  $scope.pwd = "hello";
  $scope.newPwd = "hello1";
  $scope.rNewPwd = "hello2";
  $scope.submit = function (){
    $scope.reseltNotRule = '';
    $scope.resultNotSame = '';
    $scope.result = '';
    $scope.resultSuccess = '';
    if(!($scope.name&&$scope.pwd&&$scope.newPwd&&$scope.rNewPwd)){
      $scope.result = "请填写完整";
    }else if ($scope.newPwd != $scope.rNewPwd) {
      $scope.resultNotSame = "两次密码不一致";
    }else if ($scope.pwd == $scope.newPwd) {
      $scope.result = "新旧密码不能一致";
    }
  }
});

之後具體的顯示資訊可以在具體化，基本想法是利用angular的雙向資料綁定來進行資料分析，從而顯示不同的訊息。

以上是AngularJS前端頁面操作使用者修改密碼功能的範例程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！