使用密码确认的Javascript表单验证

Question

我正在尝试写一个注册页面,我正在度过最艰难的时光.

<form  action="insert.php" method="post">
    <h1>Registration:</h1>
    <input type="text" name="first" placeholder="First name">
    <input type="text" name="last" placeholder="Last name"><br />
    <input type="text" name="username" placeholder="Username"> <br />
    <input type="password" name="password" placeholder="password"> <br />
    <input type="password" name="confirmPass" placeholder="Confirm Password"> <br />
    <input type="submit" value="Register">
</form>

这是我在注册页面上的代码.如何调用我的JavaScript函数并让它仍然发布并执行操作？我把它作为一个单独的模块,但我想合并它们

<input id="pass1" type="password" placeholder="Password" style="border-radius:7px; border:2px solid #dadada;" /> <br />
<input id="pass2" type="password" placeholder="Confirm Password" style="border-radius:7px; border:2px solid #dadada;"/> <br />

<script>
    function myFunction() {
        var pass1 = document.getElementById("pass1").value;
        var pass2 = document.getElementById("pass2").value;
        if (pass1 != pass2) {
            //alert("Passwords Do not match");
            document.getElementById("pass1").style.borderColor = "#E34234";
            document.getElementById("pass2").style.borderColor = "#E34234";
        }
        else {
            alert("Passwords Match!!!");
        }
    }
</script>

<button type="button" onclick="myFunction()">Sumbit</button>

我不需要帮助合并它们,我知道我必须切换一些东西,但是如果它们在一起,我该如何调用JavaScript函数？

在我弄清楚要做什么之后,这将更加巧妙地完成.那么调用我的JavaScript函数的最佳方法是什么,如果成功,则继续发布和操作表单的一部分.我可以放弃提交按钮,只是做一个调用JavaScript函数的按钮类型但是如果它工作与否会发生什么？我基本上(在这一点上)想要确保密码是相同的,如果没有,不要前进到insert.php,但如果它们匹配,则将表单数据传递给insert.php

Answer 1

只需onsubmit为表单添加事件处理程序:

<form  action="insert.php" onsubmit="return myFunction()" method="post">

onclick从类型中移除button并制作inputsubmit

<input type="submit" value="Submit">

并将boolean return语句添加到您的函数:

function myFunction() {
    var pass1 = document.getElementById("pass1").value;
    var pass2 = document.getElementById("pass2").value;
    var ok = true;
    if (pass1 != pass2) {
        //alert("Passwords Do not match");
        document.getElementById("pass1").style.borderColor = "#E34234";
        document.getElementById("pass2").style.borderColor = "#E34234";
        ok = false;
    }
    else {
        alert("Passwords Match!!!");
    }
    return ok;
}