角度 js ng-keyup 不适用于密码强度检查

angular js ng-keyup not working for password strength check

本文关键字：检查 密码 适用于 js ng-keyup 不适用 角度      更新时间：2023-09-26

我是Angular Programming的新手。

因此，我被赋予了一项任务，即在 Angular 中创建一个应用程序，以根据输入字符串长度检查密码的强度。

以下是我的代码，请检查一下。

<!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 颜色应在其验证时更改为红色。但它不是那样工作的..请帮忙。

伙计们请发布详细的答案，因为我是这个脚本的初学者。谢谢。

我认为您的问题应将nd-model定义为ng-model。我把你的样品放在这里并正常工作。

使用 ng-change 而不是 ng-keypress。现在它工作正常了。

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>

您可以使用

ng-change而不是input ng-keypress

请参阅此处工作代码

使用按键的键下输入和按键的

输入 
 $scope.pswd.length

用

 $scope.pswd.length+1

并在您的检查中发出警报以查看其是否正常工作

相关文章：