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

问题描述

我试图写一个注册页面，而且我正在度过最困难的时间。

  
将输入 
 
 < input type =submitvalue =Submit> 
  
并将布尔返回语句添加到您的函数中： 
 
 
  function myFunction（）{
 var pass1 = document.getElementById（pass1）。value; 
 var pass2 = document.getElementById（pass2）.value; 
 var ok = true; 
 if（pass1！= pass2）{
 // alert（密码不匹配）; 
 document.getElementById（pass1）。style.borderColor =＃E34234; 
 document.getElementById（pass2）。style.borderColor =＃E34234; 
 ok = false; 
} 
 else {
 alert（Passwords Match !!!）; 
} 
 return ok; 
} 
  
 
I am trying to write a registration page and I am having the hardest time. 
<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>
This is my code on the registration page. How do I call my JavaScript function and have it still post and do the action? I made this as a simple module which is separate but I would want to merge them
<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>
I do not need help merging them, I know I would have to switch some things around, but if they are together, how do I call the JavaScript function?
This will be done more neatly after I figure out what to do, So what would be the best way to call my JavaScript function and if it is successful proceed to post and action part of the form. I could ditch the submit button and just do a button type that calls the JavaScript function but what happens if it works or not? I essentially (at this point) want to make sure the passwords are the same and if not, don't move forward to the insert.php but if they do match, the pass the form data along to insert.php
 解决方案 
Just add onsubmit event handler for your form:
<form  action="insert.php" onsubmit="return myFunction()" method="post">
Remove onclick from button and make it input with type submit
<input type="submit" value="Submit">
And add boolean return statements to your function:
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;
}
                        
这篇关于使用密码确认的Javascript表单验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！