如何显示基于密码强度的自定义消息

问题描述：

您好我有以下一段代码，基本上检查密码的强度和基于实力显示颜色的div。就像一个力量计。如何根据密码的强弱来改变div的内容，例如密码较弱，颜色变为红色，内容显示“弱密码!!”，如果密码适中，内容应该是“中等密码“等我还想在div中添加一个复选框，所以如果条件满足，那么复选框shud的颜色如果不是红色则变为绿色。等如何显示基于密码强度的自定义消息

我的代码：

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>' 
    }; 

});

答

我发现有关您的文章一些代码，这可能会帮助你很多

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>

谢谢ABHI！但它不是我正在寻找的，但有一些想法，我可以遵循 – Blacky

听起来不错！是的，我知道这是现在正确的答案，但毕竟你是一名开发人员，你可以从中得到一些想法 –

如何显示基于密码强度的自定义消息

相关推荐