Hi I have the following piece of code that basically checking the strength of the password and showing a div with colors based on the strength. Like a strength meter. How can I mutate the content of the div based on the strength of the password, like if the password is weak, color change to red and content says "Weak passwrd!!", if the password is moderate then content should be "Moderate password" etc. Also I would like to add a check box in the divs so if the condition is met then the color of the check box shud change to green if not then red. etc.
嗨,我有以下代码,基本上检查密码的强度,并根据强度显示颜色的div。像力量计一样。如何根据密码的强度改变div的内容,如密码弱,颜色变为红色,内容显示“Weak passwrd !!”,如果密码适中则内容应为“中等密码” “等等我还想在div中添加一个复选框,所以如果符合条件,那么复选框shud的颜色会变为绿色,如果不是红色。等等
My codes:
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>'
};
});
1 个解决方案
#1
0
I found some code related your post, this may help you a lot
我发现了一些与您的帖子相关的代码,这可能会对您有所帮助
http://codepen.io/yukulele/pen/xbRpRa
var app = angular.module('app',[]);
app.controller('ctrl', function($scope){
$scope.pass="abc123456";
$scope.v=function(){
return test($scope.pass);
};
});
function test(pass){
if(pass == null)
return -1;
var s = 0;
if(pass.length<6)
return 0;
if( /[0-9]/.test( pass ) )
s++;
if( /[a-z]/.test( pass ) )
s++;
if( /[A-Z]/.test( pass ) )
s++;
if( /[^A-Z-0-9]/i.test( pass ) )
s++;
return s;
}html{
font-size: 24px;
text-align: center;
margin: 30px;
background-color: #777;
}
label{
display: block;
margin: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<label>
password:
<input
autofocus
type="text"
ng-model="pass"/>
</label>
<label>
{{v()}}
<span ng-if="v() < 2">Weak passwrd!!</span>
<span ng-if="v() > 3">Strong password</span>
</label>
</div>#1
0
I found some code related your post, this may help you a lot
我发现了一些与您的帖子相关的代码,这可能会对您有所帮助
http://codepen.io/yukulele/pen/xbRpRa
var app = angular.module('app',[]);
app.controller('ctrl', function($scope){
$scope.pass="abc123456";
$scope.v=function(){
return test($scope.pass);
};
});
function test(pass){
if(pass == null)
return -1;
var s = 0;
if(pass.length<6)
return 0;
if( /[0-9]/.test( pass ) )
s++;
if( /[a-z]/.test( pass ) )
s++;
if( /[A-Z]/.test( pass ) )
s++;
if( /[^A-Z-0-9]/i.test( pass ) )
s++;
return s;
}html{
font-size: 24px;
text-align: center;
margin: 30px;
background-color: #777;
}
label{
display: block;
margin: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<label>
password:
<input
autofocus
type="text"
ng-model="pass"/>
</label>
<label>
{{v()}}
<span ng-if="v() < 2">Weak passwrd!!</span>
<span ng-if="v() > 3">Strong password</span>
</label>
</div>