顯示密碼表強度等級

Question

enter code here

 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: /[az]/.test(pass), UpperCaseLetters: /[AZ]/.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 ""; }

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

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

我目前正在ASP.net的Visual Studio中創建密碼強度計 。 主頁是html鏈接到樣式表和JavaScript文件。

強度級別代碼使用鏈接到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,}/, /[az]+/, /[0-9]+/, /[AZ]+/]; 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>

對Password Meter 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，然后向Password Meter 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 個解決方案

解決方案1
1 2018-04-29 13:07:39

解決方案2
0 2018-04-29 18:42:38

顯示密碼表強度等級

問題描述

2 個解決方案

解決方案1 1 2018-04-29 13:07:39

解決方案2 0 2018-04-29 18:42:38

解決方案1
1 2018-04-29 13:07:39

解決方案2
0 2018-04-29 18:42:38