Question

enter code here

＆＃13;

function passwordScore(password)
var score = 0;
if (!pass)
    return score;
//
var letters = new Object();
for (var i=0; i<pass.length; i++) {
    letters[pass[i]] = (letters[pass[i]] || 0) + 1;
    score += 5.0 / letters[pass[i]];
}
//Checking the variations that have been entered in the password meter.
var variations = {
    Digitals: /\d/.test(pass),
    LowerCaseLetters: /[a-z]/.test(pass),
    UpperCaseLetters: /[A-Z]/.test(pass),
    NonSpaceWords: /\W/.test(pass),
}

varitationCount = 0;
for (var check in varitations) {
    variationCount += (variations[check] == true) ? 1 : 0;
}
score += (variationCount - 1) * 10;

return parseInt(score);
//Checking the password strength score with the name of the strength level.
function checkPasswordStrength(pass) {
    var score = passwordScore(pass);
    if (score > 80)
        return "Very Strong";
    if (score > 60)
        return "Strong";
    if (score > 40)
        return "Good";
    if (score > 20)
        return "Weak";
    if (score > 0)
        return "Very Weak";

    return "";
}

＆＃13;

/* The font type, background colour and the margin settings for the body tag*/
body {
    font-family: "Calibri (Body)";
    background-color: #006699;
    margin: 0;
}
/* The font size, padding, margin, text align and background colour settings for the h1 tag*/
h1 {
    font-size: 30px;
    padding: 0;
    margin: 0;
    text-align: center;
    background-color: #cccc99;
}
/* The padding, width and the margin settings for the div tag*/
div {
    padding: 10px;
    width: 600px;
    margin: 0 auto;
}
/* The width settings for the myInput function*/
#myInput {
    width: 100%;
}
.Strength{
    display: inline-block;
}

＆＃13;

<!DOCTYPE html>
<html lang="en-gb">
<head>
    <meta charset="utf-8" />
    <title>Password Meter</title>
    <!--The CSS link tag for the StyleSheet.css file.-->
    <link type="text/css" href="./StyleSheet.css" rel="stylesheet" />
    <!--The script tag for HideorDisplay.js file.-->
    <script src="HideorDisplay.js"></script>
    <!--The script tag for PasswordMeter.js file.-->
    <script src="PasswordMeter.js"></script>
    <!--The script tag for PasswordStrengthLevel.js file.-->
    <script src="PasswordStrengthLevel.js"></script>
    <!--The script tag for Suggestions.js file.-->
    <script src="Suggestions.js"></script>
    <!--The script tag for PasswordIntegrity.js file.-->
    <script src="PasswordIntegrityFacts.js"></script>
</head>
<body>
    <!--The Password Meter header tag.-->
    <h1> Password Meter</h1>
    <div>
        <input type="password" id="myInput" class="input_1, Password" onkeyup="checkPasswordStrength()"><br><br>
        <div class="Strength" id="StrengthLevel" text="Strength Level"></div>
        <div class="Strength" id="StrengthScore" text="Strength Score (0)"></div>
        <input type="checkbox" onclick="passwordVisible()"> Hidden or Visible
    </div>
</body>
</html>

＆＃13;

我目前正在ASP.net的visual studio中创建密码强度计。主页面是链接到样式表和JavaScript文件的html。

强度等级代码在链接到HTML页面的JavaScript中编码。强度等级与分数的要求是 0 = very weak，20 = weak，40 = good，60 = strong和80 = very strong。

目前我在程序运行时出现强度级别时遇到问题，因为当我输入密码时，没有任何内容出现。我不知道如何解决这个问题。

我试图链接到div类ID但没有发生任何事情。

我已经看过几个用JavaScript编写的例子，但它们很难理解。 *任何人都可以提供解决此问题的建议或提供构建代码和将功能链接到HTML页面的示例吗？

Answer 1

$("input").on("keyup",function(){
var pass = $(this).val();
var strength = 1;
var arr = [/.{5,}/, /[a-z]+/, /[0-9]+/, /[A-Z]+/];
jQuery.map(arr, function(regexp) {
  if(pass.match(regexp))
     strength++;
});
console.log(strength==1?"very Weak":strength==2?"Weak":strength==3?"medium":strength==4?"good":"very good");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />

Answer 2

将一个名为password的id添加到输入标记，并删除内联事件处理程序，例如。

<input type="password" id="password" class="input_1 Password"><div>

对密码计js文件进行了一些细微更改

 function scorePassword(pass) {
    var score = 0;
    if (!pass) {
        return score;
    }

    var letters = {};
    for (var i = 0; i < pass.length; i++) {
        letters[pass[i]] = (letters[pass[i]] || 0) + 1;
        score += 5.0 / letters[pass[i]];
    }

    var variations = {
        digitals: /\d/.test(pass),
        lowerCaseLetters: /[a-z]/.test(pass),
        upperCaseLetters: /[A-Z]/.test(pass),
        nonSpaceWords: /\W/.test(pass),
    }

    variationCount = 0;
    for (var check in variations) {
        variationCount += (variations[check] == true) ? 1 : 0;
    }
    score += (variationCount - 1) * 10;

    return parseInt(score);
}

function checkPassStrength(pass) {
    var score = scorePassword(pass);

    if (score > 80) {
        return "Very Strong";
    } else if (score > 60) {
        return "Strong";
    } else if (score > 40) {
        return "Good";
    } else if (score > 20) {
        return "Weak";
    } else if (score <= 10) {
        return "Very Weak";
    } else {
        return "";
    }
}

在Password Meter js文件中添加另一个功能，以显示上面的值。

var password = document.getElementById("password");
password.onkeyup = function () {

    var pass = this.value;
    var strengthLevel = document.getElementById("StrengthLevel");
    var strengthScore = document.getElementById("StrengthScore");

    strengthLevel.innerHTML = checkPassStrength(pass);
    strengthScore.innerHTML = scorePassword(pass);
}

要切换输入元素（切换密码可见性），请在复选框中添加一个名为passwordVisibility的ID，然后将另一个功能添加到密码计js文件中

var passwordVisibility = document.getElementById("passwordVisibility");
passwordVisibility.onclick = function() {
    var togglePasswordVisibility = document.getElementById("password");
    if (togglePasswordVisibility.type === "password") {
        togglePasswordVisibility.type = "text";
    } else {
        togglePasswordVisibility.type = "password";
    }
}

显示密码计强度等级

2 个答案: