Question

我正在寻找一个简单的密码强度可视化工具（就像你创建一个新帐户时的gmail一样）。我想向用户展示他们的密码在视觉上有多好。

有没有人有一些他们想要分享的源代码？：）

Answer 1

选择您最喜欢的人：

10 Password Strength Meter Scripts For A Better Registration Interface

Answer 2

我发现这个https://jsfiddle.net/umesh1990/hxjf74cz/35/#我已经使用javascript实现了

function password_validate(txt) {
  var val1 = 0;
  var val2 = 0;
  var val3 = 0;
  var val4 = 0;
  var val5 = 0;
  var counter, color, result;
  var flag = false;
  if (txt.value.length <= 0) {
    counter = 0;
    color = "transparent";
    result = "";
  }
  if (txt.value.length < 8 & txt.value.length > 0) {
    counter = 20;
    color = "red";
    result = "Short";
  } else {
    document.getElementById(txt.id + "error").innerHTML = " ";
    txt.style.borderColor = "grey";
    var regex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}$/;
    //  document.getElementById("pass_veri").style.display="block";
    var fletter = /[a-z]/;
    if (fletter.test(txt.value)) {
      val1 = 20;

    } else {
      val1 = 0;
    }
    //macth special character
    var special_char = /[-!$%^&*()_+|~=`{}\[\]:";'<>?,.\/]/;
    if (special_char.test(txt.value)) {
      val2 = 30;
    } else {
      val = 0;
    }
    /*capital_letter*/
    var cap_lett = /[A-Z]/;
    if (cap_lett.test(txt.value)) {
      val3 = 20;
    } else {
      val = 0;
    }
    /*one numeric*/
    var num = /[0-9]/;
    if (num.test(txt.value)) {
      val4 = 20;
    } else {
      val4 = 0;
    }
    /* 8-15 character*/
    var range = /^.{8,50}$/;
    if (range.test(txt.value)) {
      val5 = 10;
    } else {
      val5 = 0;
    }
    counter = val1 + val2 + val3 + val4 + val5;

    if (counter >= 30) {
      color = "skyblue";
      result = "Fair";
    }
    if (counter >= 50) {
      color = "gold";
      result = "Good";
    }
    if (counter >= 80) {
      color = "green";
      result = "Strong";
    }
    if (counter >= 90) {
      color = "green";
      result = "Very Strong";
    }
  }
  document.getElementById("prog").style.width = counter + "%";
  document.getElementById("prog").style.backgroundColor = color;
  document.getElementById("result").innerHTML = result;
  document.getElementById("result").style.color = color;
}

body {
  font-family: 'Rajdhani', sans-serif;
  background-color: #E4E4E4;
}


/* tooltip*/

.hint {
  width: 258px;
  background: red;
  position: relative;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  position: absolute;
  left: 0px;
  border: 1px solid #CC9933;
  background-color: #FFFFCC;
  display: none;
  padding: 20px;
  font-size: 11px;
}

.hint:before {
  content: "";
  position: absolute;
  left: 100%;
  top: 24px;
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 1px solid transparent;
  border-left: 22px solid #CC9933;
}

.hint:after {
  content: "";
  position: absolute;
  left: 100%;
  top: 26px;
  width: 0;
  height: 0;
  border-top: 14px solid transparent;
  border-bottom: 1px solid transparent;
  border-left: 20px solid #FFFFCC;
}

.parent {
  position: relative;
}

.progress {
  height: 7px;
}

#progres {
  display: block;
}

p {
  margin: 0px;
  font-weight: normal;
}

.form-control {
  width: none;
  margin-left: 260px;
  margin-top: 25px;
  width: 200px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group col-lg-12 parent ">
  <label class="hint" id="pass-hint">
    Password Strength:<span id="result"></span>
    <br>
    <div class="progress" id="progres">
      <div class="progress-bar progress-bar-danger" role="progressbar" id="prog">
      </div>
    </div>
    <p> passowrd must have atleast 8 charatcer</p>
  </label>
  <input type="password" class="form-control" data-toggle="tooltip" data-placement="left" id="pass" onfocus="document.getElementById('pass-hint').style.display='block'" onblur="document.getElementById('pass-hint').style.display='none'" placeholder="**********"
    oninput="password_validate(this);document.getElementById('progres').style.display='block';">
  <i class=" form-control-feedback" id="passsuccess" aria-hidden="true"></i>
  <span id="passerror" class="help-block error"></span>
</div>

Answer 3

Drupal内置了Drupal 6. code for the backport to Drupal 5可能对您有用。

Answer 4

这个看起来很棒：http://www.geekwisdom.com/dyn/passwdmeter。

根据密码分数，您可以显示绿色，黄色或红色标记，或任何您想要的标记。

密码强度可视化器 - Html＆amp;的JavaScript / AJAX

4 个答案: