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>
4

2 回答 2

1

这是相当多的代码，但我在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，表单将不会提交。

提交按钮上有一个事件监听器。如果单击它，或者按下回车键将聚焦在表单中，它将运行验证。如果一切正常，它会将信息发布到表单标签的 action 属性中的 URL。

另一个重要的一点是始终在服务器端重新验证。如果用户关闭了 Javascript，则无论您的验证脚本中包含什么内容，表单都会发布信息。

于 2013-11-08T19:16:10.403 回答
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

于 2013-11-08T19:31:59.590 回答