使用密码确认的Javascript表单验证 [英] Javascript form validation with password confirming

问题描述

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

 < form action =insert.phpmethod =post> 
< h1>注册：< / h1> 
< input type =textname =firstplaceholder =First name> 
< input type =textname =lastplaceholder =Last name>< br /> 
< input type =textname =usernameplaceholder =Username> < br /> 
< input type =passwordname =passwordplaceholder =password> < br /> 
< input type =passwordname =confirmPassplaceholder =确认密码> < br /> 
< input type =submitvalue =Register> 
< / form> 
  

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

 < input id =pass1type =passwordplaceholder =Passwordstyle =border-radius：7px; border：2px solid #dadada; /> < br /> 
< input id =pass2type =passwordplaceholder =Confirm Passwordstyle =border-radius：7px; border：2px solid #dadada;/> < br /> 
 
< script> 
函数myFunction（）{
 var pass1 = document.getElementById（pass1）。value; 
 var pass2 = document.getElementById（pass2）.value; 
 if（pass1！= pass2）{
 // alert（密码不匹配）; 
 document.getElementById（pass1）。style.borderColor =＃E34234; 
 document.getElementById（pass2）。style.borderColor =＃E34234; 
} 
 else {
 alert（Passwords Match !!!）; 
} 
} 
< / script> 
 
< button type =buttononclick =myFunction（）> Sumbit< / button> 
  

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

在我弄清楚该怎么做之后，这将会更加整洁，那么调用最佳方式是什么我的JavaScript函数，如果成功的话，继续发布和操作表单的一部分。我可以放弃提交按钮，只是做一个调用JavaScript函数的按钮类型，但是如果它有效或不可行会发生什么？我基本上（在这一点上）要确保密码是相同的，如果不是，不要向前移动到insert.php，但如果它们匹配，则将表单数据传递给insert.php

解决方案

只需为您的表单添加 onsubmit 事件处理程序：

 < form action =insert.phponsubmit =return myFunction（）method =post> 
  

从 onclick >按钮并使用提交
将输入

 < 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表单验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！