JavaScript中的密碼字符檢查器

Question

我正在嘗試構建一些東西來檢查在提示中輸入的密碼是否包含大寫字母，一個小寫字母，一個特殊符號和一個長度...但是有時我僅輸入大寫的cand小寫字母時沒有警報（您將在代碼中看到它）。

另外，我在控制台Cannot read property 'length' of null at hasUpperCase"以下錯誤： Cannot read property 'length' of null at hasUpperCase"

我將在此處發布代碼：

var parola = prompt('Introdu parola:');

function hasUpperCase(parola){
 for(i = 0; i < parola.length; i++){
    if(parola[i] === parola[i].toUpperCase()){
        return true;
    }
   }
  }

function hasLowerCase(parola){
 for(i = 0; i < parola.length; i++){
    if(parola[i] === parola[i].toLowerCase()){
        return true;
     }
   }
}

var minLength = 8;
  function isLongEnough(parola){
   if(parola.length >= minLength){
    return true;
  }
 }

function hasSpecialCharacter(parola){
  var specialCharacters = "£$%^&*@~";
    for(i = 0; i < parola.length; i++){
      for(j = 0; j < specialCharacters.length; j++){
        if(parola[i] === specialCharacters[j]){
            return true;
           }
        }
      }
   }

  function isPasswordValid(parola){
    if(!hasUpperCase(parola)){
      alert('The password requires a capital letter!');
      var parola = prompt('Introdu parola:');
   }

   if(!hasLowerCase(parola)){
      alert('The password requires a lower case letter!');
      var parola = prompt('Introdu parola:');
   }

  if(!isLongEnough(parola)){
     alert('The password is not long enough!');
     var parola = prompt('Introdu parola:');
   }

   if(!hasSpecialCharacter(parola)){
     alert('The password requires a special character');
     var parola = prompt('Introdu parola:');
   }

   if((hasSpecialCharacter(parola) && hasLowerCase(parola) && hasUpperCase(parola)  && isLongEnough(parola)){

   }

 }
 isPasswordValid(parola);

Answer 1

除了實現方面的問題外，首先通過在isPasswordValid函數中檢查null或未定義的第一件事來修復該錯誤。 同樣，正如Patrick明智建議的那樣，對這些檢查使用正則表達式。 我還建議您始終在檢查函數中返回布爾值，方法是在每個for循環之后返回false。

Answer 2

您可以使用正則表達式

/^(?=.{1,}[a-z])(?=.{1,}[A-Z])(?=.{1,}([£$%^&*@~])).{8,20}$/

匹配所有這些示例。 這里是一個簡短的解釋：

^                       // the start of the string
(?=.{1,}[a-z])             // use positive look ahead to see if at least one lower case letter exists
(?=.{1,}[A-Z])             // use positive look ahead to see if at least one upper case letter exists
(?=.{1,}[£$%^&*@~])  // use positive look ahead to see if at least one underscore or special character exists
.{8,20}                 // gobble up the entire string and match between 8 and 20
$                       // the end of the string

您可以這樣使用它：

function isPasswordValid(parola)
{  
   if(!parola)
      return false;
   var reg = /^(?=.{1,}[a-z])(?=.{1,}[A-Z])(?=.{1,}([£$%^&*@~])).{8,20}$/g;
   if(parola && reg.test(parola)){
      //do stuff here
   }
}

如果您不想做所有這些事情，那么對於您的代碼而言，這是一個非常簡單的解決方案！ 刪除多余的(並將其添加到您的測試中：

function isPasswordValid(parola){
    if(!parola)
        return false;
.
.
.
.
.
.

if(parola && (hasSpecialCharacter(parola) && hasLowerCase(parola) && hasUpperCase(parola)  && isLongEnough(parola))){
      // do stuff here
   }

如果僅檢查變量，則將其評估為false：

• 空值
• 未定義
• 為NaN
• 空字符串（“”）
• 0
• 假

否則為真。

這應該可以解決所有問題。

UPDATE
感謝Patrick Roberts指出正則表達式中的錯誤。 下面是一個工作示例。

 const regex = /^(?=.{1,}[az])(?=.{1,}[AZ])(?=.{1,}([£$%^&*@~])).{8,20}$/g; const str = 'aA$'; let m; if ((m = regex.exec(str)) !== null) { // The result can be accessed through the `m`-variable. m.forEach((match, groupIndex) => { console.log(`Found match, group ${groupIndex}: ${match}`); }); } else{ console.log('no match found') } 

Answer 3

為了解決您提到的錯誤，即

Cannot read property 'length' of null at hasUpperCase

由於用戶取消了輸入，因此必須檢查從prompt()返回的值是否不為null 。

否則，您可以從<input>讀取字符串以確保該值始終是字符串。

其他一些問題是，您沒有利用正則表達式的簡單性來強制執行您使用for循環實現的某些約束，這會使您的代碼更具可讀性，可維護性且易於消化。

另外，正如我在評論中所建議的那樣，更好的做法是允許isLongEnough()接受密碼上的參數，局部變量或minlength屬性來指示最小長度，而不是當前使用的范圍變量。

最后，這將有助於利用<input>元素的pattern屬性來自動化一些可以用正則表達式表達的要求。 注意 ，我試圖將其包含在下面的解決方案中，但在pattern="(?=[az])(?=[AZ])(?=[£$%^&*@~])"似乎表現得很像馬車，所以我省略了這個特別的建議。

將這些建議應用於解決方案可能看起來像這樣：

 function hasUpperCase(parola) { return /[AZ]/.test(parola); } function hasLowerCase(parola) { return /[az]/.test(parola); } function isLongEnough(parola, minLength) { return parola.length >= minLength; } function hasSpecialCharacter(parola) { return /[£$%^&*@~]/.test(parola); } function checkPasswordValidity() { var parola = this.value; var minLength = Number(this.getAttribute('minlength')); var errors = []; if (!isLongEnough(parola, minLength)) { errors.push('a minimum length of ' + minLength + ' characters'); } if (!hasUpperCase(parola)) { errors.push('a capital letter'); } if (!hasLowerCase(parola)) { errors.push('a lower case letter'); } if (!hasSpecialCharacter(parola)) { errors.push('a special character'); } if (errors.length > 0) { this.setCustomValidity('The password requires ' + errors.join(', ')); } else { this.setCustomValidity(''); } } document.querySelector('[name="password"]').addEventListener('input', checkPasswordValidity); 

 <form> <input name="password" type="text" placeholder="Introdu parola" minlength="8" required> <input type="submit" value="Submit"> </form> 

Answer 4

isPasswordValid調用您的4個函數以檢查其有效性，但是如果其中任何一個失敗，則不會重新檢查提示的值。 它只是要求您輸入其他內容，然后繼續。 您可以通過在函數末尾重新調用isPasswordValid來重新檢查提示的有效性。 在函數末尾調用它可以防止在您輸入無效輸入然后輸入有效輸入時出現其他提示。

注意：在符號上調用toLowerCase()返回該符號，因此@@@@AAAA將是有效的。 為了解決這個問題，我在您的函數中使用了正則表達式。

 var parola = prompt('Introdu parola:'); function hasUpperCase(parola) { return /[AZ]/.test(parola) } function hasLowerCase(parola) { return /[az]/.test(parola); } var minLength = 8; function isLongEnough(parola) { return parola.length >= minLength; } function hasSpecialCharacter(parola) { return /[£$%^&*@~]/.test(parola); } var errorMessage; function isPasswordValid(parola) { if (!hasUpperCase(parola)) { errorMessage = 'The password requires a capital letter!'; } else if (!hasLowerCase(parola)) { errorMessage = 'The password requires a lower case letter!'; } else if (!isLongEnough(parola)) { errorMessage = 'The password is not long enough!'; } else if (!hasSpecialCharacter(parola)) { errorMessage = 'The password requires a special character'; } else { alert('Password is valid'); return; } parola = prompt(errorMessage); isPasswordValid(parola); } isPasswordValid(parola); 

Answer 5

該錯誤是導致立即取消的原因。 因此，我認為您應該使用文本字段中的值並驗證

這是這樣做的工作方法

  $('#form').on('submit', function() { event.preventDefault(); var parola = $('#txt_name').val(); isPasswordValid(parola); }) function hasUpperCase(parola){ for(i = 0; i < parola.length; i++){ if(parola[i] === parola[i].toUpperCase()){ return true; } } } function hasLowerCase(parola){ for(i = 0; i < parola.length; i++){ if(parola[i] === parola[i].toLowerCase()){ return true; } } } var minLength = 8; function isLongEnough(parola){ if(parola.length >= minLength){ return true; } } function hasSpecialCharacter(parola){ var specialCharacters = "£$%^&*@~"; for(i = 0; i < parola.length; i++){ for(j = 0; j < specialCharacters.length; j++){ if(parola[i] === specialCharacters[j]){ return true; } } } } function isPasswordValid(parola){ if(!hasUpperCase(parola)){ alert('The password requires a capital letter!'); return; } if(!hasLowerCase(parola)){ alert('The password requires a lower case letter!'); return; } if(!isLongEnough(parola)){ alert('The password is not long enough!'); return; } if(!hasSpecialCharacter(parola)){ alert('The password requires a special character'); return; } if(hasSpecialCharacter(parola) && hasLowerCase(parola) && hasUpperCase(parola) && isLongEnough(parola)){ alert('yayyy!!'); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="form"> <input type="text" name="text" value="" id="txt_name"> <input type="submit" value="Check password"> </form>