Проверка пароля специальными символами

avatar
Backo baki
8 августа 2021 в 23:12
203
1
0

Это все, что я мог написать, мне нужно проверить, есть ли в пароле специальный символ или нет, но почему-то это не работает, что мне нужно изменить, чтобы он мог проверить, есть ли специальные символы или нет. Нужно ли мне добавлять отдельную функцию для специальных символов или ее можно добавить в код, который у меня уже есть, все остальные проверить, есть ли в этом хитрость? Есть предложения?

    <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");
      }
    }
Источник

Ответы (1)

avatar
Dexterians
9 августа 2021 в 00:16
0

В вашем коде есть несколько ошибок, поэтому он не работает должным образом.

Пожалуйста, проверьте свои переменные и объекты. Вы вызываете 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>

Ваше регулярное выражение также ищет только специальные символы между ! и *, если вы хотите расширить это или пропустить некоторые из них, дайте мне знать, и я могу настроить его или направить вас в правильном направлении!

Backo baki
9 августа 2021 в 00:23
0

Большое спасибо, я хочу расширить специальные символы, я хочу, чтобы они были [!@#$%&*]. В следующий раз буду уделять больше внимания еще раз спасибо.

Dexterians
9 августа 2021 в 01:30
0

@Backobaki - просто измените /[!-*]/g на /[!@#$%^&*]/g