Question

我正在做一个简单的注册页面。对于密码的东西，我需要检查新密码和确认密码是否相同，但不知道如何

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

Answer 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，则表单将发布信息，无论您的验证脚本中是什么。

Answer 2

使用普通的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

如何在密码上执行客户端表单验证

2 个答案: