如何顯示基於密碼強度的自定義消息

您好我有以下一段代碼，基本上檢查密碼的強度和基於實力顯示顏色的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>' 
    }; 

});

來源

2016-09-27 Blacky

我發現有關您的文章一些代碼，這可能會幫助你很多

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>

來源

2016-09-27 08:48:09

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

聽起來不錯！是的，我知道這是現在正確的答案，但畢竟你是一名開發人員，你可以從中得到一些想法 –

如何顯示基於密碼強度的自定義消息

回答

相關問題