PHPとAJAXを使用したリアルタイム検証：電話番号とメールアドレスのバリデーション実装

リアルタイム検証システムの概要

本記事では、PHPとAJAXを組み合わせたリアルタイム検証システムの実装方法について解説します。特に、ユーザー登録フォームにおける電話番号とメールアドレスのフォーマット検証に焦点を当てます。

データベース接続の設定

まず、データベースへの接続設定から始めます。以下に接続用のPHPスクリプト例を示します。

<?php
$host = "localhost";
$db_user = "admin";
$db_pass = "securepassword";
$db_name = "user_management";

// データベース接続の確立
$connection = mysqli_connect($host, $db_user, $db_pass, $db_name);

// 接続エラーチェック
if (!$connection) {
    die("データベース接続に失敗しました: " . mysqli_connect_error());
}

// 文字セット設定
mysqli_set_charset($connection, "utf8");
?>

ログインフォームの実装

ログイン機能を実装します。ユーザー名とパスワードの入力を受け付け、データベースと照合します。

<?php
// データベース接続ファイルの読み込み
require_once('db_connection.php');

// フォームから送信されたデータの取得
$userName = $_POST['userName'];
$passWord = $_POST['passWord'];

// 入力値のバリデーション
if(empty($userName) || empty($passWord)) {
    echo "<script>alert('ログインに失敗しました！登録状況や入力内容をご確認ください！');history.back();</script>";
} else {
    // SQLインジェクション対策
    $safeUserName = mysqli_real_escape_string($connection, $userName);
    $safePassWord = mysqli_real_escape_string($connection, $passWord);
    
    // ユーザー認照照合クエリ
    $query = "SELECT * FROM accounts WHERE user_name='{$safeUserName}' AND password='{$safePassWord}'";
    $result = mysqli_query($connection, $query);
    $rowCount = mysqli_num_rows($result);
    
    if($rowCount == 0) {
        echo "<script>alert('ログインに失敗しました！ユーザー名とパスワードが正しいかご確認ください！');history.back();</script>";
    } else {
        echo "ログイン成功！";
    }
}

// データベース接続のクローズ
mysqli_close($connection);
?>

登録フォームのフロントエンド実装

次に、リアルタイム検証機能を実装した登録フォームを作成します。HTML、CSS、JavaScriptを組み合わせて、ユーザーが入力フィールドからフォーカスを移動した際に検証を行います。

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .registration-container {
            width: 600px;
            height: 500px;
            padding: 30px;
            margin: 100px auto;
            border: 2px solid #4CAF50;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .input-group {
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }
        .input-label {
            width: 100px;
            font-weight: bold;
            color: #333;
        }
        .input-field {
            flex: 1;
            height: 40px;
            padding: 0 10px;
            border: 1px solid #4CAF50;
            border-radius: 4px;
        }
        .validation-message {
            width: 200px;
            margin-left: 20px;
            color: #666;
            font-size: 14px;
            min-height: 40px;
            display: flex;
            align-items: center;
        }
        .submit-btn {
            width: 150px;
            height: 45px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 18px;
            cursor: pointer;
            margin: 20px auto;
            display: block;
        }
        .error-message {
            color: #f44336;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <form action="submit_registration.php" method="post">
        <div class="registration-container">
            <div class="input-group">
                <label class="input-label">ユーザー名:</label>
                <input type="text" name="userName" class="input-field" id="userName" />
                <div class="validation-message" id="userNameStatus">ユーザー名を入力してください。</div>
            </div>
            
            <div class="input-group">
                <label class="input-label">パスワード:</label>
                <input type="password" name="passWord" class="input-field" id="passWord" onblur="validatePassword()" />
                <div class="validation-message" id="passwordStatus">パスワードを入力してください。</div>
            </div>
            
            <div class="input-group">
                <label class="input-label">電話番号:</label>
                <input type="text" name="phoneNumber" class="input-field" id="phoneNumber" onblur="validatePhone()" />
                <div class="validation-message" id="phoneStatus">電話番号を入力してください。</div>
            </div>
            
            <div class="input-group">
                <label class="input-label">住所:</label>
                <input type="text" name="address" class="input-field" id="address" onblur="validateAddress()" />
                <div class="validation-message" id="addressStatus">住所を入力してください。</div>
            </div>
            
            <div class="input-group">
                <label class="input-label">メールアドレス:</label>
                <input type="text" name="emailAddress" class="input-field" id="emailAddress" onblur="validateEmail()" />
                <div class="validation-message" id="emailStatus">メールアドレスを入力してください。</div>
            </div>
            
            <button type="submit" class="submit-btn">登録</button>
        </div>
    </form>
    
    <script>
        // ユーザー名の重複チェック
        $("#userName").blur(function() {
            var userNameValue = $(this).val();
            if(userNameValue !== "") {
                $.ajax({
                    type: "POST",
                    url: "check_username.php",
                    data: {userName: userNameValue},
                    success: function(response) {
                        $("#userNameStatus").html(response);
                    }
                });
            }
        });
        
        // パスワードの検証
        function validatePassword() {
            var passwordValue = document.getElementById("passWord").value;
            var statusElement = document.getElementById("passwordStatus");
            
            if(passwordValue === "") {
                statusElement.innerHTML = "<span class='error-message'>パスワードを入力してください！</span>";
                return false;
            } else if(passwordValue.length < 6) {
                statusElement.innerHTML = "<span class='error-message'>パスワードは6文字以上にしてください！</span>";
                return false;
            } else {
                statusElement.innerHTML = "";
                return true;
            }
        }
        
        // 電話番号の検証
        function validatePhone() {
            var phoneValue = document.getElementById("phoneNumber").value;
            var phoneRegex = /^[1][3,4,5,7,8][0-9]{9}$/;
            var statusElement = document.getElementById("phoneStatus");
            
            if(!phoneRegex.test(phoneValue)) {
                statusElement.innerHTML = "<span class='error-message'>正しい電話番号形式を入力してください！</span>";
                return false;
            } else {
                statusElement.innerHTML = "";
                return true;
            }
        }
        
        // 住所の検証
        function validateAddress() {
            var addressValue = document.getElementById("address").value;
            var statusElement = document.getElementById("addressStatus");
            
            if(addressValue === "") {
                statusElement.innerHTML = "<span class='error-message'>住所を入力してください！</span>";
                return false;
            } else {
                statusElement.innerHTML = "";
                return true;
            }
        }
        
        // メールアドレスの検証
        function validateEmail() {
            var emailValue = document.getElementById("emailAddress").value;
            var emailRegex = /^[\w\-\.]+@[a-z0-9]+(\-[a-z0-9]+)?(\.[a-z0-9]+(\-[a-z0-9]+)?)*\.[a-z]{2,4}$/i;
            var statusElement = document.getElementById("emailStatus");
            
            if(!emailRegex.test(emailValue)) {
                statusElement.innerHTML = "<span class='error-message'>正しいメールアドレス形式を入力してください！</span>";
                return false;
            } else {
                statusElement.innerHTML = "";
                return true;
            }
        }
    </script>
</body>
</html>

ユーザー名重複チェックのバックエンド実装

AJAXリクエストに応答し、ユーザー名が既にデータベースに存在するかをチェックするPHPスクリプトです。

<?php
// データベース接続ファイルの読み込み
require_once('db_connection.php');

// POSTからユーザー名を取得
$requestedName = $_POST['userName'];

// SQLインジェクション対策
$safeName = mysqli_real_escape_string($connection, $requestedName);

// ユーザー名の重複チェッククエリ
$query = "SELECT * FROM accounts WHERE user_name='{$safeName}'";
$result = mysqli_query($connection, $query);
$count = mysqli_num_rows($result);

if($count > 0) {
    echo "<span style='color:red;font-weight:bold;'>このユーザー名は既に使用されています。</span>";
} else {
    echo "<span style='color:green;'>このユーザー名は使用可能です。</span>";
}

// データベース接続のクローズ
mysqli_close($connection);
?>

登録データの処理

最後に、ユーザーから送信された登録データを処理し、データベースに保存するPHPスクリプトです。

<?php
// データベース接続ファイルの読み込み
require_once('db_connection.php');

// フォームから送信されたデータの取得
$userName = $_POST['userName'];
$passWord = $_POST['passWord'];
$phoneNumber = $_POST['phoneNumber'];
$address = $_POST['address'];
$emailAddress = $_POST['emailAddress'];

// 必須フィールドのバリデーション
if(empty($userName) || empty($passWord) || empty($phoneNumber) || empty($emailAddress)) {
    echo "<script>alert('登録に失敗しました！必須項目をすべて入力してください。');history.back();</script>";
    exit();
}

// SQLインジェクション対策
$safeUserName = mysqli_real_escape_string($connection, $userName);
$safePassWord = mysqli_real_escape_string($connection, $passWord);
$safePhone = mysqli_real_escape_string($connection, $phoneNumber);
$safeAddress = mysqli_real_escape_string($connection, $address);
$safeEmail = mysqli_real_escape_string($connection, $emailAddress);

// データベースへの挿入クエリ
$insertQuery = "INSERT INTO accounts (user_name, password, phone, address, email) 
                VALUES ('{$safeUserName}', '{$safePassWord}', '{$safePhone}', '{$safeAddress}', '{$safeEmail}')";

// クエリの実行
if(mysqli_query($connection, $insertQuery)) {
    echo "登録が完了しました！<br>";
    echo "<a href='login.php'>こちらをクリックしてログイン</a>";
} else {
    echo "<script>alert('登録に失敗しました。後ほど再度お試しください。');history.back();</script>";
}

// データベース接続のクローズ
mysqli_close($connection);
?>

まとめ

本記事では、PHPとAJAXを使用したリアルタイム検証システムの実装方法について解説しました。ユーザー登録フォームにおいて、電話番号とメールアドレスのフォーマット検証を行うことで、ユーザーエクスペリエンスの向上とデータの品質確保を実現しました。この手法を応用することで、他のフォーム検証機能にも同様のアプローチを適用できます。

タグ: PHP AJAX バリデーション 電話番号 メールアドレス

7月7日 19:19 投稿

ホットタグ

©2026 異端開発室