基本密碼強度驗證器

Question

我正在嘗試創建一種檢測密碼是弱，中還是強的表單。 這取決於其長度。

我是新手，對javascript有點困惑，所以我已經啟動了腳本，但是缺少了一些部分。 到目前為止，我已經使用if語句制作了一個名為passwordStrength的函數

我們一直在課堂上研究一種更復雜的形式，所以我一直在從中復制部分內容。 任何幫助將不勝感激 ：）

這是我的JavaScript和我的代碼的鏈接：

http://jsfiddle.net/xes8p/

var password = document.querySelector ('#password'); 
var submit = document.querySelector ('#submit');

function displayError (fieldname, message) {
 var input_field = document.querySelector('#' + fieldname);
 var error_box = document.querySelector('#'+fieldname+'Message');
}

function hideError(fieldname){
 var input_field = document.querySelector('#'+fieldname);
 var error_box = document.querySelector('#'+fieldname+'Message');

}


function passwordStrength () {

 if(passwordStrength.value <= 4){
displayError('password', 'Weak');

 }else if(passwordStrength.value > 4 && 
passwordStrength.value  <= 6){
displayError('password', 'Medium');

}else if (passwordStrength.value <6){
displayError('password', 'Strong');
}

return passwordStrength;

}

Answer 1

如果長度僅是定義，則可以執行以下操作：

//＃region JS

function passwordStrength() {
    var weak = 6;
   // var medium = 9;
    var strong = 12;
   var message ="Your password is strong";

    var currentPasswordLength = $("#my-password-id").val().length;

    if (currentPasswordLength < weak) {
        message  = "Your password is weak");
    } else if (currentPasswordLength < strong) {
       message = "Your password is medium");
    } 
    $("#my-span-id").text(message );
}

//   $(document).ready(function(){
$("#my-password-id").keyup(passwordStrength);
// });
//#endregion JS

<!-- HTML REGION-->

<input id="my-password-id" type="password" required/>
<span  id="my-span-id"></span>

<!-- HTML ENDREGION-->

FIDLE： http ： //jsfiddle.net/uet23/