如何使用 JavaScript、Ajax 和 PHP 代码防止表单提交
[英]How do I prevent form submission with JavaScript, Ajax and PHP code
问题描述
当 email 或用户名不可用（在数据库中找不到）或密码不匹配时，我想阻止表单提交。 （密码和“确认密码”不匹配）。
这里问了一个类似的问题： JavaScript code to stop form submit
建议是使用返回 boolean 值的 function 并使用它来确定是否应该提交表单。
我试图制作类似的 usimg ajax 但我无法从 function 中的 Ajax 返回值。
这是 PHP 代码，有助于检查 email 或用户名是否存在：
if (isset($_POST['username_check'])) {
$username = $_POST['username'];
$stmt = $db->prepare("SELECT count(*) as cntUser FROM Users WHERE username = :username");
$stmt->bindValue(':username', $username, PDO::PARAM_STR);
$stmt->execute();
$count = $stmt->fetchColumn();
if($count > 0){
echo "taken";
} else {
echo 'not_taken';
}
exit();
}
if (isset($_POST['email_check'])) {
$email = $_POST['email'];
$stmt = $db->prepare("SELECT count(*) as cntUser FROM Users WHERE email = :email");
$stmt->bindValue(':email', $email, PDO::PARAM_STR);
$stmt->execute();
$count = $stmt->fetchColumn();
if($count > 0) {
echo "taken";
} else {
echo 'not_taken';
}
exit();
}
这是带有一些 javascript 的 HTML 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Register User</title>
</head>
<script>
// This code prints red or blue text on whether passwords match or not and return a boolean value
var check = function() {
var pass1 = document.getElementById("password").value;
var pass2 = document.getElementById("password2").value;
if (pass1 != "" && pass2 != "") {
if (pass1 === pass2) {
document.getElementById('message').style.color = 'green';
document.getElementById('message').innerHTML = 'matching';
return true;
} else {
document.getElementById('message').style.color = 'red';
document.getElementById('message').innerHTML = 'not matching';
return false;
}
}
else document.getElementById('message').innerHTML = '';
return false;
}
//If both passwords don't match, it should be impossible to submit form
function validate(){
var pass1 = document.getElementById("password").value;
var pass2 = document.getElementById("password2").value;
return check();
}
</script>
<body>
<h1>Register user</h1>
<form method="post" id="register_form" onsubmit="return validate();">
<label>Username:</label>
<div id="error_msg"></div>
<div>
<br><input type="text" name="username" value="" placeholder="User name" maxlength=30 required id="username" />
<span></span>
</div>
<div>
<br><label>First Name:</label>
<br><input type="text" name="firstname" value="" placeholder="First name" maxlength=45 required id="firstname" />
<br><label>Last name:</label>
<br><input type="text" name="lastname" value="" placeholder="Last name" maxlength=45 required id="lastname" />
<div>
<br><label>Epost:</label>
<br><input type="email" name="email" value="" placeholder="Email" maxlength=45 required id="email" />
<span></span>
</div>
<div>
<br><label>Password: </label>
<br><input type="password" name="password" required id="password" placeholder="Password" maxlength=60 value="" onkeyup='check();'>
<br><label>Confirm password:</label>
<br><input type="password" name="password2" required id="password2" placeholder="Confirm Password" maxlength=60 value="" onkeyup='check();'/>
<span></span><span id='message'></span>
<input type="hidden" value="{{ getMac("Register") }}" name="XSRFPreventionToken">
<br><input type="submit" name="register" id="reg_btn" value="Register"></form>
<script src="../jquery-3.5.0.js"></script>
<script src="../script.js"></script>
</body>
</html>
这是 script.js 上的 JavaScript 代码：
$('document').ready(function(){
var result = false;
var username_state = false;
var email_state = false;
var password_state = false;
$('#username').on('blur', function(){
var username = $('#username').val();
if (username == '') {
username_state = false;
return;
}
$.ajax({
url: 'process.php',
type: 'post',
data: {
'username_check' : 1,
'username' : username,
},
success: function(response){
if (response == 'taken' ) {
username_state = false;
$('#username').parent().removeClass();
$('#username').parent().addClass("form_error");
$('#username').siblings("span").text('Sorry... Username already taken');
}else if (response == 'not_taken') {
username_state = true;
$('#username').parent().removeClass();
$('#username').parent().addClass("form_success");
$('#username').siblings("span").text('Username available');
}
}
});
});
$('#email').on('blur', function(){
var email = $('#email').val();
if (email == '') {
email_state = false;
return;
}
$.ajax({
url: 'process.php',
type: 'post',
data: {
'email_check' : 1,
'email' : email,
},
success: function(response){
if (response == 'taken' ) {
email_state = false;
$('#email').parent().removeClass();
$('#email').parent().addClass("form_error");
$('#email').siblings("span").text('Sorry... Email already taken');
}else if (response == 'not_taken') {
email_state = true;
$('#email').parent().removeClass();
$('#email').parent().addClass("form_success");
$('#email').siblings("span").text('Email available');
}
}
});
});
//Check if everything is OK and submit form
$('#reg_btn').on('click', function(){
var username = $('#username').val();
var email = $('#email').val();
var password = $('#password').val();
if (username_state == false || email_state == false) {
$('#error_msg').text('Fix the errors in the form first');
$("#register_form").submit(function(e){
e.preventDefault();
});
} else $("#register_form").submit(function(e){
e.submit();
});
});
});
当密码不匹配时，我可以阻止登录。 当 email 或用户名不可用时，我确实会收到消息。 但是当 email 或用户名不可用时，我无法阻止表单提交。 （提交时只给出错误消息，因为我的数据库表中有“PK”和“唯一键”，可以防止 email 和用户名重复）。
如果 (username_state == false || email_state == false)，我如何防止表单提交？
1 个解决方案
解决方案1
1 已采纳 2020-05-03 20:28:15
您应该将侦听器设置为表单本身，而不是提交按钮。
$("#form_id_here").submit(function(e){
if (condition){
e.preventDefault();
}
});
由于字段为空，如何使用javascript阻止表单提交？
[英]How do I use javascript to prevent form submission because of empty fields?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.