我是 Angular 编程新手。
所以我收到了一个任务，以 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>关于javascript - Angular JS ng-keyup 不适用于密码强度检查，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35716070/