Как выполнить проверку формы на стороне клиента с помощью пароля

0

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

                            <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>
  • 0
    Как далеко вы продвинулись?
  • 0
    Покажи свой код
Показать ещё 1 комментарий
Теги:
client-side

2 ответа

1
Лучший ответ

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

Упрощенный 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, форма будет размещать информацию независимо от того, что находится в вашем скрипте проверки.

Поделиться
  • 0
    как автоматически направить пользователя на другую страницу, если проверка соответствия пройдена?
  • 0
    Вам нужно нажать, чтобы убедиться, что эти два значения совпадают или нет?
Показать ещё 1 комментарий
0

с нормальным 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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню