Javascript 如何对密码执行客户端表单验证_Javascript_Html_Client Side

Javascript 如何对密码执行客户端表单验证

javascript html

Javascript 如何对密码执行客户端表单验证,javascript,html,client-side,Javascript,Html,Client Side,我正在做一个简单的注册页面。对于密码的东西，我需要检查新密码和确认密码是相同的，但不知道如何 <div class="row">  <div class="large-4 columns form-text">New Username<

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

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


新用户名
；


电子邮件
；


新密码
；


重新输入密码
；

这是一段相当多的代码，但我在一篇文章中给出了一个示例

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

}))

很多时候，新的学习者会忘记e.preventDefault（）；如果没有它，无论是否进行任何验证，表单都将提交。如果有错误，返回false，表格将不会提交

“提交”按钮上有一个事件侦听器。如果单击，或按enter键将在表单中聚焦，它将运行验证。如果一切正常，它将把信息发布到表单标记的action属性中的URL

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

对于普通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>


文件
函数传递（）{
var pass_1=document.forms[“myForm”].pass_1.value.length；
var pass_2=document.forms[“myForm”].pass_2.value.length；
如果（通过1！=通过2）{
警报（“通过和重复通过必须相等”）；
返回false；
}
返回true；
}

上面的代码相同，但带有重定向：

选项2使用插件：

您已经走了多远？显示您的代码，对我之前的评论表示歉意（现已删除）。。。我误解了你的问题，以为你想检查密码是否有效。如果匹配检查通过，你如何自动将用户引导到其他页面？是否需要单击以检查这两个值是否匹配？之前，我的代码演示了如何检查每个框中的文本是否匹配。我已对其进行了更新，以证明检查后的实际提交。如果您还有其他问题，请不要犹豫！

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