Question

您好我有以下代码，基本上检查密码的强度，并根据强度显示颜色的div。像力量计一样。如何根据密码的强度改变div的内容，如密码弱，颜色变为红色，内容显示“Weak passwrd !!”，如果密码适中则内容应为“中等密码” “等等我还想在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>'
    };

});

Answer 1

我发现了一些与您的帖子相关的代码，这可能会对您有所帮助

http://codepen.io/yukulele/pen/xbRpRa

＆＃13;

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

＆＃13;

html{
  font-size: 24px;
  text-align: center;
  margin: 30px;
  background-color: #777;
}

label{
  display: block;
  margin: 10px;
}

＆＃13;

<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>

＆＃13;

如何根据密码强度显示自定义消息

1 个答案: