我正在创建一个简单的注册表单页面（register.html）：名字，姓氏，电子邮件，用户名，密码，确认密码。我将它设置为在JavaScript中验证输入客户端，如果通过则转到register.php，后者验证后端数据，然后将其安全并将其添加到数据库中。所有这一切都很好。
但是，如果说后端的验证失败，则会出现问题。我不希望客户端丢失他们输入的所有信息，并且必须再次完成所有操作，但由于它已经加载了register.php，所有表单数据现在都位于PHP脚本中，但是在新页面上。我不确定如何处理这个问题。我可以在register.php页面上创建一个重复的表单，并使用PHP脚本在后端失败时重新填充表单。但是，如果我要这样做，我不妨将PHP代码放入我的register.html并以这种方式运行它。但是当我改变行动=＆＃34; register.html＆＃34;行动=＆＃34;＆＃34;并把我的PHP代码放在那里，没有任何反应。我已经四处搜索并查看了isset，但这似乎也没有运行，HTML页面只是重新加载并清除所有字段，我甚至看不到任何回声或任何东西。
<!DOCTYPE HTML>
<html>
<head>
<title>Family Beacon Registration</title>
<style>
.required {color: #FF0000;}
.error {color: #FF0000;}
</style>
<script type="text/javascript">
function validate()
{
var hasErrors = false;
var first_name = document.forms["registration_form"]["first_name"].value;
if(first_name == "")
{
document.getElementById("first_name_error").innerHTML = "* First Name is a required field";
hasErrors = true;
}
else
document.getElementById("first_name_error").innerHTML = "*";
var last_name = document.forms["registration_form"]["last_name"].value;
if(last_name == "")
{
document.getElementById("last_name_error").innerHTML = "* Last Name is a required field";
hasErrors = true;
}
else
document.getElementById("last_name_error").innerHTML = "*";
var email = document.forms["registration_form"]["email"].value;
if(email == "")
{
document.getElementById("email_error").innerHTML = "* Email is a required field";
hasErrors = true;
}
else if(email.length > 40)
{
document.getElementById("email_error").innerHTML = "* Email must be less than 40 characters in length.";
hasErrors = true;
}
else if(email.indexOf("@") == -1)
{
document.getElementById("email_error").innerHTML = "* A valid e-mail address is required";
hasErrors = true;
}
else
document.getElementById("email_error").innerHTML = "*";
var username = document.forms["registration_form"]["username"].value;
if(username == "")
{
document.getElementById("username_error").innerHTML = "* Username is a required field";
hasErrors = true;
}
else if(username.length < 3 || username.length > 20)
{
document.getElementById("username_error").innerHTML = "* Username must be between 3 and 20 characters in length";
hasErrors = true;
}
else
document.getElementById("username_error").innerHTML = "*";
var password = document.forms["registration_form"]["password"].value;
if(password == "")
{
document.getElementById("password_error").innerHTML = "* Password is a required field";
hasErrors = true;
}
else if(password.length < 8 || password.length > 20)
{
document.getElementById("password_error").innerHTML = "* Passwords must be between 8 and 20 characters in length";
hasErrors = true;
}
else
document.getElementById("password_error").innerHTML = "*";
var confirm_password = document.forms["registration_form"]["confirm_password"].value;
if(confirm_password == "")
{
document.getElementById("confirm_password_error").innerHTML = "* Confirm Password is a required field";
hasErrors = true;
}
else if(confirm_password != password)
{
document.getElementById("confirm_password_error").innerHTML = "* Passwords do not match";
document.getElementById("password_error").innerHTML = "* Passwords do not match";
hasErrors = true;
}
else
document.getElementById("confirm_password_error").innerHTML = "*";
return !hasErrors;
}
</script>
</head>
<body>
<h2>Family Beacon Registration</h2>
<p><span class="required" id="required">* required field</span></p>
<form name="registration_form" action="register.php" onsubmit="return validate();" method="post">
First Name:<input type="text" name="first_name" id="first_name" />
<span class="error" id="first_name_error">* </span><br><br>
Last Name:<input type="text" name="last_name" id="last_name" />
<span class="error" id="last_name_error">* </span><br><br>
E-Mail:<input type="text" name="email" id="email" />
<span class="error" id="email_error">* </span><br><br>
Username:<input type="text" name="username" id="username" />
<span class="error" id="username_error">* </span><br><br>
Password:<input type="password" name="password" id="password" />
<span class="error" id="password_error">* </span><br><br>
Confirm Password:<input type="password" name="confirm_password" id="confirm_password" />
<span class="error" id="confirm_password_error">* </span><br><br>
<input type="reset" name="reset" value="Reset" />
<input type="submit" name="submit" value="Register" />
</form>
</body>
</html>
答案 0 :(得分：0)
我所做的，可能对你有用的是：
使用jquery $(window).on("beforeunload"
如下所示：
$(window).on("beforeunload", function() {
//get all the data from inputs
//set cookie with JSON.stringify(yourData)
})
然后是身体负荷：
如果您的cookie存在，JSON.parse并将其放入您的输入
编辑：如果您需要，我可以提供一些示例代码。此外，成功提交后，在PHP中，执行unset($_COOKIE['yourcookie'])之类的操作，以便在成功提交后，您的表单不会保留其输入：）
答案 1 :(得分：0)
我没有在表单中使用html post到register.php，我建议使用javascript进行Ajax调用，甚至使用jQuery更简单，如果加载了它，你可以这样做：
<!DOCTYPE HTML>
<html>
<head>
<title>Family Beacon Registration</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<style>
.required {color: #FF0000;}
.error {color: #FF0000;}
</style>
</head>
<body>
<h2>Family Beacon Registration</h2>
<p><span class="required" id="required">* required field</span></p>
<div id="form">
First Name:<input type="text" name="first_name" id="first_name" />
<span class="error" id="first_name_error">* </span><br><br>
Last Name:<input type="text" name="last_name" id="last_name" />
<span class="error" id="last_name_error">* </span><br><br>
E-Mail:<input type="text" name="email" id="email" />
<span class="error" id="email_error">* </span><br><br>
Username:<input type="text" name="username" id="username" />
<span class="error" id="username_error">* </span><br><br>
Password:<input type="password" name="password" id="password" />
<span class="error" id="password_error">* </span><br><br>
Confirm Password:<input type="password" name="confirm_password" id="confirm_password" />
<span class="error" id="confirm_password_error">* </span><br><br>
<input type="reset" name="reset" value="Reset" />
<input id="formSubmit" type="submit" name="submit" value="Register" />
</div>
<script>
$(function() {
$("#formSubmit").click(function() {
var hasErrors = false,
first_name = document.forms["registration_form"]["first_name"].value,
last_name = document.forms["registration_form"]["last_name"].value,
email = document.forms["registration_form"]["email"].value,
username = document.forms["registration_form"]["username"].value,
password = document.forms["registration_form"]["password"].value,
confirm_password = document.forms["registration_form"]["confirm_password"].value;
if(first_name == "") {
document.getElementById("first_name_error").innerHTML = "* First Name is a required field";
hasErrors = true;
} else {
document.getElementById("first_name_error").innerHTML = "*";
}
if(last_name == "") {
document.getElementById("last_name_error").innerHTML = "* Last Name is a required field";
hasErrors = true;
} else {
document.getElementById("last_name_error").innerHTML = "*";
}
if(email == "") {
document.getElementById("email_error").innerHTML = "* Email is a required field";
hasErrors = true;
} else if(email.length > 40) {
document.getElementById("email_error").innerHTML = "* Email must be less than 40 characters in length.";
hasErrors = true;
} else if(email.indexOf("@") == -1) {
document.getElementById("email_error").innerHTML = "* A valid e-mail address is required";
hasErrors = true;
} else {
document.getElementById("email_error").innerHTML = "*";
}
if(username == "") {
document.getElementById("username_error").innerHTML = "* Username is a required field";
hasErrors = true;
} else if(username.length < 3 || username.length > 20) {
document.getElementById("username_error").innerHTML = "* Username must be between 3 and 20 characters in length";
hasErrors = true;
} else {
document.getElementById("username_error").innerHTML = "*";
}
if(password == "") {
document.getElementById("password_error").innerHTML = "* Password is a required field";
hasErrors = true;
} else if(password.length < 8 || password.length > 20) {
document.getElementById("password_error").innerHTML = "* Passwords must be between 8 and 20 characters in length";
hasErrors = true;
} else {
document.getElementById("password_error").innerHTML = "*";
}
if(confirm_password == "") {
document.getElementById("confirm_password_error").innerHTML = "* Confirm Password is a required field";
hasErrors = true;
} else if(confirm_password != password) {
document.getElementById("confirm_password_error").innerHTML = "* Passwords do not match";
document.getElementById("password_error").innerHTML = "* Passwords do not match";
hasErrors = true;
} else {
document.getElementById("confirm_password_error").innerHTML = "*";
}
if(!hasErrors) {
$.post( "register.php", {
first_name: first_name,
last_name: last_name,
email: email,
username: username,
password: password,
confirm_password: confirm_password
})
.done(function(data) {
// Data is the PHP echoed output.
alert(data);
})
.fail(function() {
alert( "error" );
});
}
});
});
</script>
</body>
</html>