kiểm tra sự tồn tại của tên người dùng trong jQuery – Sử dụng phương thức kiểm tra từ xa của jQuery để kiểm tra xem tên người dùng đã tồn tại hay chưa. Thông thường, chúng ta cần kiểm tra xem một tên người dùng hoặc email đã tồn tại hay chưa. Tôi muốn kiểm tra xem tên người dùng có tồn tại trong cơ sở dữ liệu bằng jQuery.
kiểm tra sự tồn tại của tên người dùng trong jQuery
Sử dụng phương thức kiểm tra từ xa của jQuery để kiểm tra xem tên người dùng đã tồn tại hay chưa. Kiểm tra giá trị $_POST[‘membername’] trong bảng thành viên. Nếu tên người dùng đã tồn tại, thì trả về “Có sẵn”.
| Trường | Loại |
|---|---|
| id | INT(11) |
| membername | VARCHAR(255) |
| VARCHAR(255) | |
| memberPass | VARCHAR(255) |
Kiểm tra xem người dùng đã tồn tại mà không cần gửi biểu mẫu
Bước 1: signup.php
<?php include('process.php'); ?>
<html>
<head>
<title>signup</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form id="signup_form">
<h1>signup</h1>
<div id="error_msg"></div>
<div>
<input type="text" name="membername" placeholder="membername" id="membername" >
<span></span>
</div>
<div>
<input type="email" name="email" placeholder="Member Email" id="email">
<span></span>
</div>
<div>
<input type="password" name="memberPass" placeholder="memberPass" id="memberPass">
</div>
<div>
<button type="button" name="signup" id="reg_btn">signup</button>
</div>
</form>
</body>
</html>
<!-- scripts -->
<script src="jquery-3.2.1.min.js"></script>
<script src="script.js"></script>
Bước 2: styles.css
body {
background: #A9D9C3;
}
#signup_form h1 {
text-align: center;
}
#signup_form {
width: 37%;
margin: 100px auto;
padding-bottom: 30px;
border: 1px solid #918274;
border-radius: 5px;
background: white;
}
#signup_form input {
width: 80%;
height: 35px;
margin: 5px 10%;
font-size: 1.1em;
padding: 4px;
font-size: .9em;
}
#reg_btn {
height: 35px;
width: 80%;
margin: 5px 10%;
color: white;
background: #3B5998;
border: none;
border-radius: 5px;
}
/*Styling for errors on form*/
.form_error span {
width: 80%;
height: 35px;
margin: 3px 10%;
font-size: 1.1em;
color: #D83D5A;
}
.form_error input {
border: 1px solid #D83D5A;
}
/*Styling in case no errors on form*/
.form_success span {
width: 80%;
height: 35px;
margin: 3px 10%;
font-size: 1.1em;
color: green;
}
.form_success input {
border: 1px solid green;
}
#error_msg {
color: red;
text-align: center;
margin: 10px auto;
}
Bước 3:script.js
$('document').ready(function(){
var membername_state = false;
var email_state = false;
$('#membername').on('blur', function(){
var membername = $('#membername').val();
if (membername == '') {
membername_state = false;
return;
}
$.ajax({
url: 'signup.php',
type: 'post',
data: {
'membername_check' : 1,
'membername' : membername,
},
success: function(response){
if (response == 'taken' ) {
membername_state = false;
$('#membername').parent().removeClass();
$('#membername').parent().addClass("form_error");
$('#membername').siblings("span").text('Sorry... membername already taken');
}else if (response == 'not_taken') {
membername_state = true;
$('#membername').parent().removeClass();
$('#membername').parent().addClass("form_success");
$('#membername').siblings("span").text('membername available');
}
}
});
});
$('#email').on('blur', function(){
var email = $('#email').val();
if (email == '') {
email_state = false;
return;
}
$.ajax({
url: 'signup.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');
}
}
});
});
$('#reg_btn').on('click', function(){
var membername = $('#membername').val();
var email = $('#email').val();
var memberPass = $('#memberPass').val();
if (membername_state == false || email_state == false) {
$('#error_msg').text('Fix the errors in the form first');
}else{
// proceed with form submission
$.ajax({
url: 'signup.php',
type: 'post',
data: {
'save' : 1,
'email' : email,
'membername' : membername,
'memberPass' : memberPass,
},
success: function(response){
alert('member saved');
$('#membername').val('');
$('#email').val('');
$('#memberPass').val('');
}
});
}
});
});
Bước 4: process.php
<?php
$db = mysqli_connect('localhost', 'root', '', 'pakainfo_v1');
if (isset($_POST['membername_check'])) {
$membername = $_POST['membername'];
$query = "SELECT * FROM members WHERE membername='$membername'";
$output = mysqli_query($db, $query);
if (mysqli_num_rows($output) > 0) {
echo "pakainfo_v1";
}else{
echo 'not_taken';
}
exit();
}
if (isset($_POST['email_check'])) {
$email = $_POST['email'];
$query = "SELECT * FROM members WHERE email='$email'";
$output = mysqli_query($db, $query);
if (mysqli_num_rows($output) > 0) {
echo "pakainfo_v1";
}else{
echo 'not_taken';
}
exit();
}
if (isset($_POST['save'])) {
$membername = $_POST['membername'];
$email = $_POST['email'];
$memberPass = $_POST['memberPass'];
$query = "SELECT * FROM members WHERE membername='$membername'";
$output = mysqli_query($db, $query);
if (mysqli_num_rows($output) > 0) {
echo "exists";
exit();
}else{
$query = "INSERT INTO members (membername, email, memberPass)
VALUES ('$membername', '$email', '".md5($memberPass)."')";
$output = mysqli_query($db, $query);
echo 'Saved!';
exit();
}
}
?>
Ví dụ 2: Kiểm tra tính khả dụng của tên người dùng bằng PHP và jQuery
Để kiểm tra tính khả dụng của tên người dùng bằng PHP và jQuery, bạn có thể sử dụng AJAX để gửi yêu cầu đến một tập lệnh PHP kiểm tra cơ sở dữ liệu cho tên người dùng. Dưới đây là một ví dụ:
Tạo một biểu mẫu bao gồm một trường nhập dữ liệu cho tên người dùng và một div để hiển thị thông báo về tính khả dụng:
<form>
<label for="username">Username:</label>
<input type="text" name="username" id="username">
<div id="availability"></div>
</form>
Bao gồm jQuery và tạo một hàm để gửi yêu cầu AJAX khi trường nhập tên người dùng thay đổi:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#username').on('input', function() {
var username = $(this).val();
$.ajax({
url: 'check_username.php',
type: 'POST',
data: {username: username},
success: function(response) {
$('#availability').html(response);
}
});
});
});
</script>
Tạo một tập lệnh PHP (check_username.php) kiểm tra cơ sở dữ liệu cho tên người dùng và trả về một phản hồi cho biểu mẫu cho biết liệu tên người dùng có khả dụng hay không:
<?php
// Connect to database
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check if username exists
$username = $_POST['username'];
$sql = "SELECT * FROM users WHERE username='$username'";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
echo "<span style='color:red;'>Username not available</span>";
} else {
echo "<span style='color:green;'>Username available</span>";
}
// Close database connection
mysqli_close($conn);
?>
Trong ví dụ này, chúng tôi sử dụng mysqli để kết nối với cơ sở dữ liệu và truy vấn bảng người dùng để kiểm tra tên người dùng. Nếu tên người dùng được tìm thấy, chúng tôi trả về một thông báo cho biết tên người dùng không khả dụng. Nếu tên người dùng không được tìm thấy, chúng tôi trả về một thông báo cho biết tên người dùng có sẵn. Lưu ý rằng đây là một ví dụ đơn giản và bạn nên thực hiện các biện pháp bảo mật thích hợp (như làm sạch dữ liệu nhập của người dùng và sử dụng câu lệnh đã chuẩn bị) để bảo vệ khỏi các cuộc tấn công SQL injection.
Tôi hy vọng bạn đã hiểu về kiểm tra sự tồn tại của tên người dùng trong jQuery.
- Bài viết blog này được xuất bản ban đầu tại: https://www.pakainfo.com
