Как выполнить проверку на стороне клиента на пароле

Я делаю простую страницу регистрации. Для материала пароля, мне нужно проверить новый пароль и подтвержденный пароль одинаковы, но понятия не имею, какКак выполнить проверку на стороне клиента на пароле

      <div class="row"> 
           <!--New Username--> 
           <div class="large-4 columns form-text">New Username</div> 
           <div class="large-8 columns"> 
            <div class="input-icon font-awesome">&#xf007;</div><input type="text" class="form-input" name="username" required> 
           </div> 
          </div> 
          <br/> 
          <div class="row"> 
           <!--New email--> 
           <div class="large-4 columns form-text">Email</div> 
           <div class="large-8 columns"> 
            <div class="input-icon font-awesome">&#xf003;</div><input type="email" class="form-input" name="email" pattern="[a-zA-Z]*@[a-zA-Z]*" required> 
           </div> 
          </div> 
          <br/> 
          <div class="row"> 
           <!--New Passwrord--> 
           <div class="large-4 columns form-text">New Password</div> 
           <div class="large-8 columns"> 
            <div class="input-icon font-awesome">&#xf084;</div><input type="password" class="form-input" name="password" required> 
           </div> 
          </div> 
          <br/> 
          <div class="row"> 
           <!--Reconfirm new password--> 
           <div class="large-4 columns form-text">Re-enter Password</div> 
           <div class="large-8 columns"> 
            <div class="input-icon font-awesome">&#xf084;</div><input type="password" class="form-input" name="password-confirm" required> 
           </div> 
          </div>

источник

2013-11-08 Frank Tian

Как далеко вы получили? –

Покажите свой код brock – ashley

Извините за мой комментарий раньше (теперь он удален) ... Я неправильно понял ваш вопрос и подумал, что вы хотите проверить, был ли пароль действительным – freefaller

Это совсем немного кода, но я вспыхнуло пример на fiddle.

упрощенный HTML:

<form id="passwordForm" action="#" method="POST"> 
    Password:<br> 
    <input type="password" id="password"><br> 
    Confirm Password:<br> 
    <input type="password" id="confirmPassword"><br> 
    <input type="submit" id="submitButton" value="Check 'Em"> 
</form> 
<div id="responseDiv"></div>

Я использовал JQuery:

$(document).ready(function() { 
    $("#submitButton").click(function (e) { 
     e.preventDefault(); 
     var matched, 
      password = $("#password").val(), 
      confirm = $("#confirmPassword").val(); 

     matched = (password == confirm) ? true : false; 
     if(matched) { 
      //Submit line commented out for example. In production, remove the // 
      //$("#passwordForm").submit(); 

      //Shows success message and prevents submission. In production, comment out the next 2 lines. 
      $("#responseDiv").html("Passwords Match"); 
      return false; 
    } 
    else { 
     $("#responseDiv").html("Passwords don't match..."); 
     return false; 
    } 
});

});

Много раз новые ученики забудут e.preventDefault(); Без него форма будет отправляться независимо от какой-либо проверки. Верните false, если что-то не так, и форма не будет отправлена.

На кнопке отправки есть прослушиватель событий. Если он нажат или нажата клавиша ввода, она будет сфокусирована в форме, и она проведет проверку. Если все в порядке, оно отправит информацию в URL-адрес в атрибуте action тега формы.

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

источник

2013-11-08 19:16:10

, как вы автоматически перенаправляете пользователя на какую-либо другую страницу, если проверка соответствия пройдена? –

Вам нужно щелкнуть, чтобы проверить, соответствуют ли эти два значения или нет? –

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

с нормальным JavaScript, просто адаптируются к исходному коду:

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 

<script> 
function pass() { 
    var pass_1 = document.forms["myForm"].pass_1.value.length; 
    var pass_2 = document.forms["myForm"].pass_2.value.length; 
    if (pass_1 != pass_2) { 
     alert("the pass and repeat pass must be equal"); 
     return false; 
    } 
    return true; 
} 
</script> 
</head> 

<body> 
    <form method="post" action="" name="myForm" onSubmit="pass(); return false;"> 
    <input type="password" placeholder="type your pass" name="pass_1"> 
    <input type="password" placeholder="confirm your pass" name="pass_2"> 
<input type="submit" value="validate"> 
</form> 
</body> 
</html>

тот же код, приведенный выше, но с переадресацией: http://jsfiddle.net/m7BrM/

вариант 2 Использование плагина: http://www.technicalkeeda.com/jquery/password-and-confirm-password-validation-in-jquery

источник

2013-11-08 19:31:59

Как выполнить проверку на стороне клиента на пароле

ответ

Смежные вопросы