ユーザー登録の際に、AJAXを使用してログインアカウントが他のユーザーと重複していないか確認するサンプルコードを提供します。
以下のコードは、ユーザーがログインアカウントを入力した後、AJAXリクエストでサーバーにそのアカウントが既に使用されているかを問い合わせ、結果に応じてエラーメッセージを表示する例です。
1. HTML (ユーザー登録フォーム)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ユーザー登録</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>ユーザー登録フォーム</h2>
<form id="registrationForm">
<label for="username">ログインアカウント:</label>
<input type="text" id="username" name="username" required>
<span id="username-error" style="color: red; display: none;">このアカウントはすでに使用されています。</span>
<br><br>
<button type="submit">登録</button>
</form>
<script>
$(document).ready(function() {
// ユーザー名入力時にAJAXで重複チェック
$('#username').on('blur', function() {
var username = $(this).val();
if (username !== "") {
$.ajax({
url: 'check_username.php', // サーバー側で重複をチェックするPHPファイル
type: 'POST',
data: { username: username },
})
.done(function(response) { // AJAX成功時に実行される
if (response === 'exists') {
$('#username-error').show(); // 重複があればエラーメッセージを表示
} else {
$('#username-error').hide(); // 重複していなければエラーメッセージを非表示
}
})
.fail(function() { // AJAX失敗時のエラーハンドリング
alert('エラーが発生しました。');
});
}
});
});
</script>
</body>
</html>
2. PHP (サーバーサイドでの重複チェック)
check_username.php
<?php
$host = 'localhost';
$dbname = 'shop';
$user = 'root';
$password ='wert3333';
// 普通はこんな感じに変数にします
$pdo=new PDO("mysql:host=$host;dbname=$dbname;charset=utf8" , $user, $password );
// ユーザー名を受け取る
if (isset($_POST['username'])) {
$username = htmlspecialchars($_POST['username']);
// ユーザー名の重複チェック
$sql = "SELECT * FROM customer WHERE login = '$username'";
$result = $pdo->query($sql);
if ( !empty($result->fetch()) > 0) {
// 重複している場合
echo 'exists';
} else {
// 重複していない場合
echo $username;
}
}
コメントを残す