带有密码确认的Javascript表单验证

我正在试着写一个注册页面，我正经历着最艰难的时刻

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

函数myFunction（）{
var pass1=document.getElementById（“pass1”）.value；
var pass2=document.getElementById（“pass2”）.value；
if（pass1！=pass2）{
//警报（“密码不匹配”）；
document.getElementById（“pass1”）.style.borderColor=“#E34234”；
document.getElementById（“pass2”）.style.borderColor=“#E34234”；
}
否则{
警报（“密码匹配！！！”；
}
}
萨姆比特

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

---

在我弄清楚该做什么之后，这将更加整洁地完成，那么调用JavaScript函数的最佳方式是什么呢？如果成功，则继续执行表单的post和action部分。我可以放弃submit按钮，只做一个调用JavaScript函数的按钮类型，但是如果它能工作或不能工作，会发生什么呢？我基本上（在这一点上）希望确保密码相同，如果密码不相同，则不前进到insert.php，但如果它们匹配，则将表单数据传递到insert.php，只需为表单添加

onsubmit

事件处理程序即可：

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

<form  id="regform" action="insert.php" method="post">

并向函数中添加布尔返回语句：

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";
        return false;
    }
    else {
        alert("Passwords Match!!!");
    }
    return ok;
}

<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!!!");
            document.getElementById("regForm").submit();
        }
    }
</script>

将以下内容添加到您的表单中：

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

<form  id="regform" action="insert.php" method="post">

将此添加到您的函数中：

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";
        return false;
    }
    else {
        alert("Passwords Match!!!");
    }
    return ok;
}

<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!!!");
            document.getElementById("regForm").submit();
        }
    }
</script>

函数myFunction（）{
var pass1=document.getElementById（“pass1”）.value；
var pass2=document.getElementById（“pass2”）.value；
if（pass1！=pass2）{
//警报（“密码不匹配”）；
document.getElementById（“pass1”）.style.borderColor=“#E34234”；
document.getElementById（“pass2”）.style.borderColor=“#E34234”；
}
否则{
警报（“密码匹配！！！”；
document.getElementById（“regForm”）.submit（）；
}
}

消除不必要代码的JQuery方法