Html 带有密码确认的Javascript表单验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16990378/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript form validation with password confirming
提问by ajk4550
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
这是我在注册页面上的代码。我如何调用我的 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>
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?
我不需要帮助合并它们，我知道我必须切换一些东西，但是如果它们在一起，我该如何调用 JavaScript 函数？
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
在我弄清楚要做什么之后，这将更巧妙地完成，那么调用我的 JavaScript 函数的最佳方法是什么，如果成功，请继续发布和操作表单的一部分。我可以放弃提交按钮，只做一个调用 JavaScript 函数的按钮类型，但如果它有效或无效会发生什么？我基本上（此时）想确保密码相同，如果不是，请不要前进到 insert.php 但如果它们匹配，则将表单数据传递给 insert.php
回答by antyrat
Just add onsubmitevent handler for your form:
只需onsubmit为您的表单添加事件处理程序：
<form action="insert.php" onsubmit="return myFunction()" method="post">
Remove onclickfrom buttonand make it inputwith type submit
onclick从类型中删除button并使其成为inputsubmit
<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";
return false;
}
else {
alert("Passwords Match!!!");
}
return ok;
}
回答by cyclical
if ($("#Password").val() != $("#ConfirmPassword").val()) {
alert("Passwords do not match.");
}
A JQuery approach that will eliminate needless code.
一种消除不必要代码的 JQuery 方法。
回答by Axel Amthor
add this to your form:
将此添加到您的表单中：
<form id="regform" action="insert.php" method="post">
add this to your function:
将此添加到您的函数中：
<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>
