javascript中特殊字符的密碼驗證-有解無憂

我正在撰寫一個密碼驗證代碼，其中至少包含：一個小字母、一個大寫字母、一個數字、一個特殊字符，最少 8 個，最多 12 個字符

但無法驗證特殊字符，其余所有條件均有效

HTML 代碼：

<label for="psw"><b>Password <i class="fa fa-asterisk" style="font-size: 12px; color: red"></i>:</b></label>
<input id="pswd" name="pswd" type="password" placeholder="Enter Password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_= -])$" title="Must contain at least one Special Character and one Number and one Uppercase and Lowercase letter, and at least 8 or more characters" required>  <br>

                <div id="message">
                    <h3>Password must contain the following:</h3>
                    <p id="letter" class="invalid">A <b>lowercase</b> letter</p>
                    <p id="capital" class="invalid">A <b>capital (uppercase)</b>letter</p>
                    <p id="number" class="invalid">A <b>number</b></p>
                    <p id="length" class="invalid">Minimum <b>8 characters</b></p>
                    <p id="spcl" class="invalid">A <b>Special character</b></p>
                    <p id="maxlength" class="invalid">Minimum <b>8 character</b> and Maximum <b>12 character</b></p>

                </div>

Javascript

 <script type="text/javascript">
         var myInput = document.getElementById("pswd");

         var letter = document.getElementById("letter");
         var capital = document.getElementById("capital");
         var number = document.getElementById("number");
         var maxlength = document.getElementById("maxlength");
         var spcl = document.getElementById("spcl");
// When the user clicks on the password field, show the message box
         myInput.onfocus = function () {
         document.getElementById("message").style.display = "block";
         }

         // When the user clicks outside of the password field, hide the message box
         myInput.onblur = function () {
         document.getElementById("message").style.display = "none";
                            }

         // When the user starts to type something inside the password field
          myInput.onkeyup = function () {
                            // Validate lowercase letters
                            var lowerCaseLetters = /[a-z]/g;
                            if (myInput.value.match(lowerCaseLetters)) {
                                letter.classList.remove("invalid");
                                letter.classList.add("valid");
                            } else {
                                letter.classList.remove("valid");
                                letter.classList.add("invalid");
                            }

                            // Validate capital letters
                            var upperCaseLetters = /[A-Z]/g;
                            if (myInput.value.match(upperCaseLetters)) {
                                capital.classList.remove("invalid");
                                capital.classList.add("valid");
                            } else {
                                capital.classList.remove("valid");
                                capital.classList.add("invalid");
                            }

                            // Validate numbers
                            var numbers = /[0-9]/g;
                            console.log(numbers);
                            if (myInput.value.match(numbers)) {
                                number.classList.remove("invalid");
                                number.classList.add("valid");
                            } else {
                                number.classList.remove("valid");
                                number.classList.add("invalid");
                            }
                            
                            var spcl = /[!@#$%^&*_= -]/g;
                            console.log(spcl);
                            if (myInput.value.match(spcl)) {
                                spcl.classList.remove("invalid");
                                spcl.classList.add("valid");
                            } else {
                                console.log(myInput.value);
                                spcl.classList.remove("valid");
                                spcl.classList.add("invalid");
                            }


                            //Validate max length
                            if (myInput.value.length >= 8 && myInput.value.length <= 12) {
                                console.log('in min max condition');
                                console.log(myInput.value.length);
                                maxlength.classList.remove("invalid");
                                maxlength.classList.add("valid");
                            } else {
                                maxlength.classList.add("invalid");
                                maxlength.classList.remove("valid");
                            }
                        }
                    </script>

當我檢查特殊字符時

                        var spcl = /[!@#$%^&*_= -]/g;
                        console.log(spcl);
                        if (myInput.value.match(spcl)) {
                            spcl.classList.remove("invalid");
                            spcl.classList.add("valid");
                        } else {
                            console.log(myInput.value);
                            spcl.classList.remove("valid");
                            spcl.classList.add("invalid");
                        }

在控制臺中顯示錯誤為：未捕獲的型別錯誤：無法讀取未定義的屬性（讀取“洗掉”）

在列印變數“spcl”的類串列時，我得到的輸出是“無效”，但仍然面臨這個未捕獲的型別錯誤：無法讀取未定義的屬性（讀取“洗掉”）

uj5u.com熱心網友回復：

檢查這個問題：檢查字串中的特殊字符

對于特殊字符使用這個：

var format = /[!@#$%^&*()_ \-=\[\]{};':"\\|,.<>\/?] /;

if(format.test(string)){
  return true;
} else {
  return false;
}

uj5u.com熱心網友回復：

有了這個，你可以檢查字串是否包含特殊字符。

        //Regex for Valid Characters i.e. Alphabets, Numbers and Space.
        var regex = /^[A-Za-z0-9 ] $/
 
        //Validate TextBox value against the Regex.
        var isValid = regex.test(document.getElementById("txtName").value);
        if (!isValid) {
            alert("Contains Special Characters.");
        } else {
            alert("Does not contain Special Characters.");
        }

uj5u.com熱心網友回復：

正如我評論的那樣，您將兩個變數命名為 spcl。當您重命名它時，它可以作業，您的正則運算式沒有任何問題。另外，我注意到您跳過了最小長度驗證，所以我添加了它。

var myInput = document.getElementById("pswd");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
var maxlength = document.getElementById("maxlength");
var spcl = document.getElementById("spcl");
var length = document.getElementById("length");

// When the user clicks on the password field, show the message box
myInput.onfocus = function () {
   document.getElementById("message").style.display = "block";
  }

// When the user clicks outside of the password field, hide the message box
myInput.onblur = function () {
   document.getElementById("message").style.display = "none";
  }

// When the user starts to type something inside the password field
myInput.onkeyup = function () {
   // Validate lowercase letters
   var lowerCaseLetters = /[a-z]/g;
   if (myInput.value.match(lowerCaseLetters)) {
      letter.classList.remove("invalid");
      letter.classList.add("valid");
   } else {
      letter.classList.remove("valid");
      letter.classList.add("invalid");
   }

   // Validate capital letters
   var upperCaseLetters = /[A-Z]/g;
   if (myInput.value.match(upperCaseLetters)) {
      capital.classList.remove("invalid");
      capital.classList.add("valid");
   } else {
      capital.classList.remove("valid");
      capital.classList.add("invalid");
   }

   // Validate numbers
   var numbers = /[0-9]/g;
   console.log(numbers);
   if (myInput.value.match(numbers)) {
      number.classList.remove("invalid");
      number.classList.add("valid");
   } else {
      number.classList.remove("valid");
      number.classList.add("invalid");
   }
                            
   var special = /[!@#$%^&*_= -]/g;
   console.log(special);
   if (myInput.value.match(special)) {
      spcl.classList.remove("invalid");
      spcl.classList.add("valid");
   } else {
      console.log(myInput.value);
      spcl.classList.remove("valid");
      spcl.classList.add("invalid");
   }


   //Validate max length
   if (myInput.value.length >= 8 && myInput.value.length <= 12) { 
      console.log('in min max condition');
      console.log(myInput.value.length);
      maxlength.classList.remove("invalid");
      maxlength.classList.add("valid");
  } else {
      maxlength.classList.add("invalid");
      maxlength.classList.remove("valid");
  }
  
  //Validate min length
   if (myInput.value.length >= 8) { 
      length.classList.remove("invalid");
      length.classList.add("valid");
  } else {
      length.classList.add("invalid");
      length.classList.remove("valid");
  }
}

.invalid {
color: red
}

.valid {
color: green
}

<label for="psw"><b>Password <i class="fa fa-asterisk" style="font-size: 12px; color: red"></i>:</b>
    </label>
    <input id="pswd" name="pswd" type="password" placeholder="Enter Password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_= -])$" title="Must contain at least one Special Character and one Number and one Uppercase and Lowercase letter, and at least 8 or more characters" required><br>
    <div id="message">
       <h3>Password must contain the following:</h3>
       <p id="letter" class="invalid">A <b>lowercase</b> letter</p>
       <p id="capital" class="invalid">A <b>capital (uppercase)</b>letter</p>
       <p id="number" class="invalid">A <b>number</b></p>
       <p id="length" class="invalid">Minimum <b>8 characters</b></p>
       <p id="spcl" class="invalid">A <b>Special character</b></p>
       <p id="maxlength" class="invalid">Minimum <b>8 character</b> and Maximum <b>12 character</b>
       </p>
    </div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/480327.html

標籤：javascript html 正则表达式验证密码

上一篇：HTML中的影像網格格式

下一篇：單擊影像時彈出螢屏