【发布时间】：2016-09-27 07:58:46
【问题描述】：
您好，我有以下一段代码，它基本上检查密码的强度并根据强度显示带有颜色的 div。就像一个力量计。如何根据密码的强度改变 div 的内容，例如如果密码较弱，颜色变为红色，内容显示“弱密码！！”，如果密码中等，则内容应为“中等密码” " 等等。另外我想在 div 中添加一个复选框，所以如果满足条件，那么复选框的颜色会变为绿色，如果不是红色则变为绿色。等等
我的代码：
HTML
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>My AngularJS App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body ng-controller="stageController">
<form name="myForm" novalidate>
<label for="pw">Type a password</label><br/>
<input type="password" ng-model="pw" name="pw" id="pw" />
<li id="strength" check-strength="pw"></li>
</form>
</body>
CSS：
input.ng-pristine + ul#strength {
display:none;
}
ul#strength {
display:inline;
list-style:none;
margin:0;
margin-left:15px;
padding:0;
vertical-align:2px;
}
.point:last {
margin:0 !important;
}
.point {
background:#DDD;
border-radius:2px;
display:inline-block;
height:5px;
margin-right:1px;
width:20px;
}
#footer {
position:fixed;
bottom:5px;
}
AngularJS：
'use strict';
angular.module('myApp', ['myApp.directives']);
/* Controllers */
function stageController($scope) {
$scope.pw = '';
}
/* Directives */
angular.module('myApp.directives', []).
directive('checkStrength', function () {
return {
replace: false,
restrict: 'EACM',
link: function (scope, iElement, iAttrs) {
var strength = {
colors: ['#F00', '#F90', '#FF0', '#9F0', '#0F0'],
mesureStrength: function (p) {
var _force = 0;
var _regex = /[$-/:-?{-~!"^_`\[\]]/g;
var _lowerLetters = /[a-z]+/.test(p);
var _upperLetters = /[A-Z]+/.test(p);
var _numbers = /[0-9]+/.test(p);
var _symbols = _regex.test(p);
var _flags = [_lowerLetters, _upperLetters, _numbers, _symbols];
var _passedMatches = $.grep(_flags, function (el) { return el === true; }).length;
_force += 2 * p.length + ((p.length >= 10) ? 1 : 0);
_force += _passedMatches * 10;
// penality (short password)
_force = (p.length <= 6) ? Math.min(_force, 10) : _force;
// penality (poor variety of characters)
_force = (_passedMatches == 1) ? Math.min(_force, 10) : _force;
_force = (_passedMatches == 2) ? Math.min(_force, 20) : _force;
_force = (_passedMatches == 3) ? Math.min(_force, 40) : _force;
return _force;
},
getColor: function (s) {
var idx = 0;
if (s <= 10) { idx = 0; }
else if (s <= 20) { idx = 1; }
else if (s <= 30) { idx = 2; }
else if (s <= 40) { idx = 3; }
else { idx = 4; }
return { idx: idx + 1, col: this.colors[idx] };
}
};
scope.$watch(iAttrs.checkStrength, function () {
if (scope.pw === '') {
iElement.css({ "display": "none" });
} else {
var c = strength.getColor(strength.mesureStrength(scope.pw));
iElement.css({ "display": "inline" });
iElement.children('div')
.css({ "background": "#DDD" })
.slice(0, c.idx)
.css({ "background": c.col });
}
});
},
template: '<div class="alert alert-success"><strong>Success!</strong> Indicates a successful or positive action.</div>'
};
});
【问题讨论】：
标签： javascript jquery html css angularjs