как заставить мой валидатор паролей работать?

Question

как заставить мой валидатор паролей работать?

0

У меня есть код проверки пароля, который я получил в Интернете, и я его подстраивал под свои нужды. Единственное, что у меня с этим связано.

мой html-код:

<form id="fleft">
<input type="password" name="Password" id="box1" /><span id="msg_out1"></span>

</form>

мой код jquery:

  jQuery('#box1').keyup(function(){
    jQuery('#msg_out1').html(checkStrength(jQuery('#box1').val()))
}) 

function checkStrength(Password){

var strength = 0

if (Password.length < 6) {
    jQuery('#msg_out1').removeClass()
    jQuery('#msg_out1').addClass('notenough')
    jQuery('#msg_out1').html('&#10008; at least 6 characters.');

  }

if (Password.length > 7) strength += 1

if (Password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/))  strength += 1

if (Password.match(/([a-zA-Z])/) && Password.match(/([0-9])/))  strength += 1

if (Password.match(/([!,%,&,@,#,$,^,*,?,_,~])/))  strength += 1

if (Password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,",%,&,@,#,$,^,*,?,_,~])/)) strength   += 1

if (strength <= 2 ) {
    jQuery('#msg_out1').removeClass()
    jQuery('#msg_out1').addClass('notsecure')
     jQuery( "#msg_out1" ).html('&#10004; Password not secure!');
} else if (strength == 2 ) {
    jQuery('#msg_out1').removeClass()
    jQuery('#msg_out1').addClass('moresecure')
    jQuery( "#msg_out1" ).html('&#10004; Password is good, could be more secure!');
} else {
    jQuery('#msg_out1').removeClass()
    jQuery('#msg_out1').addClass('secure')
    jQuery( "#msg_out1" ).html('&#10004; Password is secure!');
}

}

мой css:

  #fleft.notenough{
   color:red;
font-size:15px;
margin-left:40px;
font-family:"Helvetica Neue", Helvetica, sans-serif;

}

#fleft.notsecure{
color:rgb(255, 109, 36);
font-size:15px;
margin-left:40px;
font-family:"Helvetica Neue", Helvetica, sans-serif;
}

 #fleft.moresecure{
color:#F6FF00;
font-size:15px;
margin-left:40px;
font-family:"Helvetica Neue", Helvetica, sans-serif;
}

#fleft.secure{
color:green;
font-size:15px;
margin-left:40px;
font-family:"Helvetica Neue", Helvetica, sans-serif;

}

Я понимаю, как работает код: дело в том, когда пользователь вводит 1 символ # msg_out1 показывает пароль, который не защищен, что неверно, оно должно отображаться как минимум на 6 символов, и ни один из указанных классов не отображается. Я прошу профессионала посмотреть на это и сказать, где я ошибся, пожалуйста.

john london 08 дек. 2013, в 20:58

Источник

Теги:

jquery

html5

css3

3 ответа

Ещё вопросы

Yehia Awad · Answer 1 · 2013-12-08T18-17-00.000Z

mmm Проблема заключается в настройке

Прочитайте комментарии, которые я добавил в коде ниже

if (Password.length < 6) {
    jQuery('#msg_out1').removeClass()
    jQuery('#msg_out1').addClass('notenough')
    jQuery('#msg_out1').html('&#10008; at least 6 characters.');

  } 


// *** you are replacing the #msg_out1 id with '&#10008; at least 6 characters.';***

if (Password.length > 7) strength += 1

if (Password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/))  strength += 1

if (Password.match(/([a-zA-Z])/) && Password.match(/([0-9])/))  strength += 1

if (Password.match(/([!,%,&,@,#,$,^,*,?,_,~])/))  strength += 1

if (Password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,",%,&,@,#,$,^,*,?,_,~])/)) strength   += 1

if (strength <= 2 ) {
    jQuery('#msg_out1').removeClass()
    jQuery('#msg_out1').addClass('notsecure')
     jQuery( "#msg_out1" ).html('&#10004; Password not secure!'); 

// *** you are overriding the previous #msg_out1 id '&#10008; at least 6 characters.';
//with the new message '&#10004; Password not secure!'

} else if (strength == 2 ) {
    jQuery('#msg_out1').removeClass()
    jQuery('#msg_out1').addClass('moresecure')
    jQuery( "#msg_out1" ).html('&#10004; Password is good, could be more secure!');
} else {
    jQuery('#msg_out1').removeClass()
    jQuery('#msg_out1').addClass('secure')
    jQuery( "#msg_out1" ).html('&#10004; Password is secure!');
}

Решение:

Что вы можете сделать, либо:

if (Password.length < 6) {
        jQuery('#msg_out1').removeClass()
        jQuery('#msg_out1').addClass('notenough')
        jQuery('#msg_out1').html('&#10008; at least 6 characters.');
    return ;
      }

или append() вместо html(), если вы хотите, чтобы приложение показывало оба сообщения вместе

if (strength <= 2 ) {
    jQuery('#msg_out1').removeClass()
    jQuery('#msg_out1').addClass('notsecure')
     jQuery( "#msg_out1" ).append('&#10004; Password not secure!');
}

удачи

возврат работал, но мой класс не применяется, у вас есть решение для этого?
Почему бы вам просто не набрать этот способ, если (Password.length <6) {ваш код} еще, если (сила <= 2) {ваш код}

Paul Roub · Answer 2 · 2013-12-08T17-33-00.000Z

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

Вы хотите вернуться после обнаружения проблемы, например

if (Password.length < 6) {
  jQuery('#msg_out1').
    removeClass().
    addClass('notenough').
    html('&#10008; at least 6 characters.');

  return;
}

это сработало, но никто из моего класса не был применен. Должен ли я вернуть имя класса?
Нет - пропустил эту часть. Ваш CSS неисправен. Вам нужен пробел между идентификатором контейнера и селектором класса, как в #fleft .notenough{} вместо #fleft.notenough{} . Таким образом, ваш CSS будет применяться только в том случае, если этот класс был добавлен ко всему контейнеру.

john london · Answer 3 · 2013-12-08T18-02-00.000Z

Я нашел способ сделать свое шоу класса:

 if (Password.length < 6) {
    jQuery('#msg_out4').removeClass()
    jQuery('#msg_out4').html('&#10008; at least 6 characters.').css('color','red').css('font-size','15px').css('margin-left','40px').css('font-family','"Helvetica Neue", Helvetica, sans-serif');
    return ;