我用PHP&MySQL作为数据库。如果数据库中已经存在电子邮件地址，我想阻止表单提交数据。如果数据库中存在电子邮件，我还想禁用提交按钮。
索引.php：
<?php
require_once './include/user.php';
$user_obj = new user();
if (isset($_POST['submit'])) {
$message = $user_obj->save_user($_POST);
}
?>
<!DOCTYPE html>
<html>
<head>
<title>PHP Form With JS Validation</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/country.js"></script>
<script type="text/javascript" src="js/jsval.js"></script>
</head>
<body>
<p>PHP Form With JS Validation</p>
<div id="id1">
<form id="myForm" name="myForm" action="index.php" method="POST" onsubmit="return validateStandard(this)">
<table>
<tr><td><input type="text" name="name" value="" placeholder="name" required="required" regexp="JSVAL_RX_ALPHA"></td></tr>
<tr><td><input type="email" name="email" value="" placeholder="email" required="required" required regexp="JSVAL_RX_EMAIL"></td></tr>
<tr><td><input type="password" name="user_password" value="" placeholder="password" required="required"></td></tr>
<tr><td><input type="tel" name="phone" value="" placeholder="phone no" required="required"></td></tr>
<tr>
<td>
<input type="radio" name="gender" value="male" checked>Male
<input type="radio" name="gender" value="female">Female
</td>
</tr>
<tr><td><textarea name="address" placeholder="address" required="required"></textarea></td></tr>
<tr><td><input type="text" name="city" value="" placeholder="city" required regexp="JSVAL_RX_ALPHA"></td></tr>
<tr><td>
<select name="country" required="required" exclude=" ">
<option value=" ">Please Select Country</option>
<script type="text/javascript">printCountryOptions();</script>
</select>
</td></tr>
<tr><td><input type="text" name="zipcode" value="" placeholder="zipcode" required="required" regexp="JSVAL_RX_ALPHA_NUMERIC"></td></tr>
<tr><td><input type="checkbox" name="agree" value="on" required="required"> I agreed with all the terms!</td></tr>
<tr><td><input type="submit" id="sbtn" name="submit" value="Register"></td></tr>
</table>
</form>
</div>
</body>
</html>
<script>
document.forms['myForm'].reset();
</script>
db:user.php
<?php
class user {
public function save_user($data) {
$hostname = "localhost";
$username = "root";
$password = "";
$dbname = "db_user_info";
$conn = mysqli_connect($hostname, $username, $password, $dbname);
$user_password = md5($data['user_password']);
$sql = "INSERT INTO tbl_user (name, email, user_password, phone, gender, address, city, country, zipcode, agree) VALUES ('$data[name]','$data[email]','$user_password', '$data[phone]','$data[gender]','$data[address]','$data[city]','$data[country]','$data[zipcode]','$data[agree]')";
if (!mysqli_query($conn, $sql)) {
die('Sql Error:' . mysqli_error($conn));
} else {
header('Location:thanks.php');
}
mysqli_close($conn);
}
}
要实现这一点，您需要ajax，您有两个选项
- 在username字段上，您可以有一个onblr事件，然后调用一个函数，该函数将使用onblur事件检查数据库中的用户名
<input name="username" type="text" id="username" onBlur="checkAvailability()">
当对象失去焦点时，会发生onblur事件。onblur事件最常用于表单验证代码(例如，当用户留下表单字段)。
使用此方法，一旦用户完成键入电子邮件地址并离开输入字段，就会启动checkAvailability()函数，并使用ajax向服务器发送异步请求。用户甚至在提交之前就知道用户名是否被占用了。
- 收集所有表单数据，并在点击提交按钮时返回结果，而不刷新页面(还有ajax)
让我们从选项2开始，因为它有点容易。
首先，您需要使用准备好的语句，还需要使用php内置的password_hash和password_verify()函数来获得更安全的密码
首先，我们将有一个带有用户名字段(电子邮件)的表单，您只能看到发生了什么，然后当我们单击注册按钮时，我们启动ajax，它将调用php脚本并返回json数据以供使用。
index.php
<style>
.status-available{color:#2FC332;}
.status-not-available{color:#D60202;}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#register').submit(function (event){
var formData = {
'username' : $('input[name=username]').val()
};
$.ajax({
type : 'POST',
data : formData,
url : 'register.php',
dataType :'json',
encode : true
})
.done(function(data){
console.log(data); //debugging puroposes
if(!data.success){
if(data.errors.username){
$('#user-availability-status').append(data.errors.username);
}
if(data.errors.exists){
$('#user-availability-status').append(data.errors.exists);
$('#submit').prop('disabled', true);
}
}else{
$('#submit').prop('disabled', false);
$('#success').append('<div class="alert alert-success">'+data.message+'</div>');
// alert('done');
}
})
.fail(function(data){
console.log(data); //server errrors debugging puporses only
});
event.preventDefault();
});
});
</script>
<div id="frmCheckUsername">
<div id="success" class="status-available"></div>
<form method="POST" action="register.php" id="register">
<label>Username:</label>
<input name="username" type="text" id="username"><span id="user-availability-status" class="status-not-available"></span><br><br>
<button type="submit" name="submit" id="submit"> Register </button>
</div>
<p><img src="LoaderIcon.gif" id="loaderIcon" style="display:none" /></p>
</form>
注册.php
<?php
require_once("dbcontroller.php");
$data = array();
$errors = array();
if (empty($_POST['username'])) {
$errors['username'] = 'enter username';
} else {
$username = $_POST['username'];
//check if username exists
$statement = $con->prepare("SELECT email FROM users WHERE email = ? LIMIT 1");
$statement->bind_param('s', $username);
$statement->execute();
$statement->store_result();
if ($statement->num_rows == 1) {
$errors['exists'] = 'the email ' . $username . ' already registered please login';
}
}
if (!empty($errors)) {
//We have errors send them back
$data['success'] = false;
$data['errors'] = $errors;
} else {
//No errors insert
$stmt = $con->prepare("INSERT INTO users (username) VALUES(?)");
$stmt->bind_param("s", $username);
$stmt->execute();
$data['success'] = true;
$data['message'] = 'user registered';
$stmt->close();
$con->close();
}
echo json_encode($data);
?>
dbcontroller.php是我的数据库连接类，所以您可以忽略它并拥有自己的连接类。
这将为您指明至少的正确方向
选项1使用onblur事件
<style>
.status-available{color:#2FC332;}
.status-not-available{color:#D60202;}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
function checkAvailability() {
$("#loaderIcon").show();
jQuery.ajax({
url: "register.php",
data:'username='+$("#username").val(),
type: "POST",
success:function(data){
$("#user-availability-status").html(data);
$("#loaderIcon").hide();
$('#submit').prop('disabled', true);
},
error:function (){}
});
}
</script>
<div id="frmCheckUsername">
<label>Check Username:</label>
<input name="username" type="text" id="username" onBlur="checkAvailability()"><span id="user-availability-status" class="status-not-available"></span> <br><br>
<button type="submit" name="submit" id="submit"> Register </button>
</div>
<p><img src="LoaderIcon.gif" id="loaderIcon" style="display:none" /></p>
在这个例子中，用户一离开输入框，就会选中Availability()；启动
您只需在Db中已经存在该电子邮件之前进行检查当用户键入电子邮件时，您只需发出ajax请求如果响应为true，则发出ajax，只禁用提交按钮
您必须使用ajax。http://api.jquery.com/jquery.ajax/
您的提交按钮默认设置被禁用。如果访问者编写了电子邮件地址，则将带有该地址的ajax查询发送到后端，它将返回电子邮件状态。如果你的数据库中不存在电子邮件，js会从按钮中删除disabled属性。
它是如此相似：使用ajax 检查用户名是否存在