javascript - 带有特殊字符的密码验证

Question

这就是我可以写的所有内容，我需要检查密码中是否有特殊字符，但由于某种原因它不起作用我需要更改什么，以便它可以验证是否有特殊字符。我是否需要为特殊字符添加一个单独的函数，或者它可以添加到我已经拥有的代码中，所有其他的检查是否有窍门？有什么建议吗？

    <form>
    <div class="form-group">
    <input type="password" class="form-control" id="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" placeholder="Password" required>
    </div>
    </form>
    
    <div id="message">
     <ul>
     <li id="letter" class="invalid">One lowercase character</li>
     <li id="capital" class="invalid">One uppercase character</li>
     <li id="number" class="invalid">One number</li>
     <li id="character" class="invalid">One special character</li>
     <li id="length" class="invalid">Eight characters minimun</li>
     </ul>
    </div>


    var myInput = document.getElementById("psw");
    var letter = document.getElementById("letter");
    var capital = document.getElementById("capital");
    var number = document.getElementById("number");
    var length = document.getElementById("length");
    var character = document.getElementById("character");

    // When the user clicks on the password field, show the message box
    myInput.onfocus = function() {
      document.getElementById("message").style.display = "inline-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 Special character This part does not i dont know what to do
      var character = /[!-*]/g;
      if(myInput.value.match(character)) {  
        characte.classList.remove("invalid");
        characte.classList.add("valid");
      } else {
        characte.classList.remove("valid");
        characte.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;
      if(myInput.value.match(numbers)) {  
        number.classList.remove("invalid");
        number.classList.add("valid");
      } else {
        number.classList.remove("valid");
        number.classList.add("invalid");
      }
      
      // Validate length
      if(myInput.value.length >= 8) {
        length.classList.remove("invalid");
        length.classList.add("valid");
      } else {
        length.classList.remove("valid");
        length.classList.add("invalid");
      }
    }

标签： javascripthtml

Answer 1

您的代码有一些问题，这就是它无法正常工作的原因。

请检查您的变量和对象。您正在调用的characte是未在任何地方声明的。

character您已两次声明该变量。这会引起冲突。使其中一个对另一个独一无二。

注意你的控制台日志，那里通常总有一个线索。

当我修正你的错别字并分离你的character变量时，它就起作用了；

var myInput = document.getElementById("psw");
    var letter = document.getElementById("letter");
    var capital = document.getElementById("capital");
    var number = document.getElementById("number");
    var length = document.getElementById("length");
    var character = document.getElementById("character");

    // When the user clicks on the password field, show the message box
    myInput.onfocus = function() {
      document.getElementById("message").style.display = "inline-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 Special character This part does not i dont know what to do
      var specCharacter = /[!-*]/g;
      if(myInput.value.match(specCharacter)) {  
        character.classList.remove("invalid");
        character.classList.add("valid");
      } else {
        character.classList.remove("valid");
        character.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;
      if(myInput.value.match(numbers)) {  
        number.classList.remove("invalid");
        number.classList.add("valid");
      } else {
        number.classList.remove("valid");
        number.classList.add("invalid");
      }
      
      // Validate length
      if(myInput.value.length >= 8) {
        length.classList.remove("invalid");
        length.classList.add("valid");
      } else {
        length.classList.remove("valid");
        length.classList.add("invalid");
      }
    }

    <form>
    <div class="form-group">
    <input type="password" class="form-control" id="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" placeholder="Password" required>
    </div>
    </form>
    
    <div id="message">
     <ul>
     <li id="letter" class="invalid">One lowercase character</li>
     <li id="capital" class="invalid">One uppercase character</li>
     <li id="number" class="invalid">One number</li>
     <li id="character" class="invalid">One special character</li>
     <li id="length" class="invalid">Eight characters minimun</li>
     </ul>
    </div>

您的正则表达式也只是在之间寻找特殊字符!，*如果您想扩展它或缺少一些，请告诉我，我可以调整它或引导您朝着正确的方向前进！