Поле пароля должно содержать в jQuery - PullRequest
0 голосов
/ 26 сентября 2019

Я создал форму забытого пароля и хочу разрешить пользователю создавать инструкции с надежным паролем в jQuery.Как: кнопка «Отправить» отключена, пока пользователь не введет комбинацию UpperCase,LowerCase,Number,Character в поле пароля, и после, если оба пароля текстового поля будут сопоставлены, кнопка «Отправить» будет включена для щелчка ..

Я сделал базовое сопоставление двух полей в jquery, но яне знаю, как я могу обнаружить или разрешить пользователю печатать вышеуказанные символы, альфа, номер и т. д.

, пожалуйста, помогите мне создать эту функцию;

<input class="password1" id="password1" name="password1" type="password" placeholder="New password.." />
 <div class="progress-bar_wrap">
   <div class="progress-bar_item progress-bar_item-1"></div>
   <div class="progress-bar_item progress-bar_item-2"></div>
   <div class="progress-bar_item progress-bar_item-3"></div>
 </div>

<input class="confirmpassword" id="confirmpassword" name="confirmpassword" type="password" placeholder="New password agian.." />

<div class="instdiv" id="instdiv"></div>
<input class="btn btn-primary_ok" name="submit" type="submit" id="submit" value="Submit & Update" /><br />

<script>
$("#instdiv").html('1. The password should contain a minimum of 8 and a maximum of 16 characters.<br/>2. Password should be alpha-numeric with atleast 4 distinct characters and 1 special character.<br/>3. Spaces are not allowed in a password.');
        $(function() {
            $("#confirmpassword").keyup(function() {
                var password = $("#password1").val();
                $("#instdiv").html(password == $(this).val()
                    ? "Great!"
                    : "not Matched"
                );
            });
        });
</script>

Я уже использую счетчик паролей, я хочу показать в сообщении, что нужно в текстовом поле, например: если пользователь вводит только нижний регистр, то сообщение показывает atleast One Uppercase и наоборот, и если пользователь вводит только число, html текст показывает atleast One Character and Uppercase and Lowercase и суммарный символ должен быть выше 8 и ниже 25.

Попытайтесь понять ..

PassWord Meter Я сделал: Обновленный вопрос

$( document ).ready(function() {

          $('#password1').keyup(function(){
            let len = this.value.length;
            const pbText = $('.progress-bar_text');

            if (len === 0) {
              $('.progress-bar_item').each(function() {
                $(this).removeClass('active')
              });
            } 
            else if (len > 0 && len <=8) {
              $('.progress-bar_item-1').addClass('active');
              $('.progress-bar_item-2').removeClass('active');
              $('.progress-bar_item-3').removeClass('active');
            } 
            else if (len > 8 && len <= 16) {
              $('.progress-bar_item-2').addClass('active');
              $('.progress-bar_item-3').removeClass('active');
            } 
            else {
              $('.progress-bar_item').each(function() {
                $(this).addClass('active');
              });
            } 
          });

        });

 .progress-bar_wrap {
   width: 100%;
   height: 5px;
   background: #F6F6FA;
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
   border-radius: 5px;
 }

.progress-bar_item {
   display: inline-block;
   height: 100%;
   width: 32.5%;
   margin-right: .8%;
   border-radius: 5px;
   float: left;
   transition: background-color .2s, visisility .1s;
 }

 .progress-bar_item-1.active {
   background-color: #FF4B47;
 }

 .progress-bar_item-2.active {
   background-color: #F9AE35;
 }

 .progress-bar_item-3.active {
   background-color: #2DAF7D;
 }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...