角度js ng-keyup不能用於密碼強度檢查

所以我給了一個任務來創建一個角度的應用程序來檢查基於輸入字符串長度的密碼強度。

以下是我的代碼，請檢查一下。

<!DOCTYPE html> 
<html> 
<head> 
    <title>password strength</title> 
    <style type="text/css"> 
    .red{ 
     background-color: red; 
    } 
    .orange{ 
     background-color: orange; 
    } 
    .green{ 
     background-color: green; 
    } 

    </style> 
    <script type="text/javascript" src="angular.js"></script> 
    <script type="text/javascript"> 
     var ans= angular.module("myapp",[]); 
     ans.controller("pswdstr",function($scope){ 
      $scope.show=function(){ 
       var pswdlen= $scope.pswd.length; 
       if (pswdlen==0) 
       { 
        $scope.color=""; 
        $scope.validation="Enter password"; 
       } 
       else if (pswdlen<=5) 
       { 
        $scope.color="red"; 
        $scope.validation="password is weak"; 
       } 
       else if (pswdlen>5 && pswdlen<=8) 
       { 
        $scope.color="orange"; 
        $scope.validation="password is ok"; 
       } 
       else if (pswdlen>8) 
       { 
        $scope.color="green"; 
        $scope.validation="password is strong"; 
       }; 

      }; 

     }); 
    </script> 
</head> 
<body ng-app="myapp" ng-controller="pswdstr"> 
<label for="pswd">Enter password</label> 
<input type="password" name="pswd" id="pswd" ng-model="pswd" ng-keypress="show()"></input> 
<div class='{{ color }}' ng-if="pswd"> 
{{ validation }} 
</div> 
</body> 
</html>

我面臨的問題是該應用程序無法正常工作。當字符串長度低於5或低於8時，根據條件，div顏色應隨其驗證一起變爲紅色。但它不是這樣工作..請幫助。

和傢伙請發佈詳細的答案，因爲我是這個腳本的初學者。謝謝。

來源

2016-03-01 Vishnuprasad Venugopal

可能幫助ühttp://jsfiddle.net/jaredwilli/5RrX7/ –

太難理解。在控制檯時，我調用ng-keyup，在控制檯中顯示$ scope.pswd沒有被定義！請幫助 –

我認爲你的問題是定義nd模型爲ng模型。我把你的樣品放在這裏，並正確地工作。

使用ng-keypress的ng-change insted。現在它工作正常。

var ans= angular.module("myapp",[]); 
 
     ans.controller("pswdstr",function($scope){ 
 
      $scope.show=function(){ 
 
       var pswdlen= $scope.pswd.length; 
 
       if (pswdlen==0) 
 
       { 
 
        $scope.color=""; 
 
        $scope.validation="Enter password"; 
 
       } 
 
       else if (pswdlen<=5) 
 
       { 
 
        $scope.color="red"; 
 
        $scope.validation="password is weak"; 
 
       } 
 
       else if (pswdlen>5 && pswdlen<=8) 
 
       { 
 
        $scope.color="orange"; 
 
        $scope.validation="password is ok"; 
 
       } 
 
       else if (pswdlen>8) 
 
       { 
 
        $scope.color="green"; 
 
        $scope.validation="password is strong"; 
 
       }; 
 

 
      }; 
 

 
     });

.red{ 
 
     background-color: red; 
 
    } 
 
    .orange{ 
 
     background-color: orange; 
 
    } 
 
    .green{ 
 
     background-color: green; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myapp" ng-controller="pswdstr"> 
 
<label for="pswd">Enter password</label> 
 
<input type="password" name="pswd" id="pswd" ng-model="pswd" ng-change="show()"> 
 
<div class='{{ color }}' ng-if="pswd"> 
 
{{ validation }} 
 
</div> 
 
</div>

來源

2016-03-01 06:57:02

在您檢查按鍵和

$scope.pswd.length

使用

$scope.pswd.length+1

instread和警報使用的keydown instread看到它的工作或沒有

來源

2016-03-01 07:06:05

您可以使用ng-change代替ng-keypress內input

看到here工作代碼

來源

2016-03-01 07:41:23

角度js ng-keyup不能用於密碼強度檢查

回答

相關問題