Как установить минимальную длину пароля

Question

В настоящее время я работаю над формой html. Как установить минимальную длину пароля на 8, чтобы он отклонил любой пароль, который вводит пользователь, который меньше 8. Как это сделать?

Вот код:

<div id="login-form"> 
      <form method="post"> 
      <table align="center" width="30%" border="0"> 
      <tr> 
      <td><input type="text" name="email" placeholder="Your Email" required /></td> 
      </tr> 
      <tr> 
      <td><input type="password" name="pass" placeholder="Your Password" required /></td> 
      </tr> 
      <tr> 
      <td><button type="submit" name="btn-login">Sign In</button></td> 
      </tr> 
      <tr> 
      <td><a href="register.php">Sign Up Here</a></td> 
      </tr> 
      </table> 
      </form> 
     </div> 

Answer 1

Если вы используете HTML5 вы можете использовать pattern и необходимый атрибут для ввода тега:

<input type="password" pattern=".{8,}" required title="8 characters minimum"> 
<input type="password" pattern=".{8,12}" required title="8 to 12 characters"> 

Также есть minlength атрибут для ввода тегов, но он еще не был реализован в Firefox.

<input type="password" minlength="8" required> 

Answer 2

Изменить кнопку:

<button name="btn-login">Sign In</button> 

И добавить этот код JavaScript (с помощью JQuery):

$('button[name="btn-login"]').click(function() { 
    if($('input[name="pass"]').val().length < 8) { 
     alert('Minimum length = 8'); 
    } else { 
     $('form').submit(); 
    } 
}); 

Не забудьте добавить этот в ваш PHP-код.

Answer 3

Вы можете использовать атрибут шаблона:

<input pattern=".{8,}" type="password" name="pass" placeholder="Your Password" required /> 

Answer 4

К сожалению, минимальная длина атрибута не поддерживается на всех браузерах. check this out

Из-за этого следует использовать альтернативный метод.

Я выбрал использование регулярного выражения, как показано ниже;

<input type="password" name="pass" title="Password must be 8 characters including 1 uppercase letter, 1 lowercase letter and numeric characters" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" >