<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新規会員登録</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        form {
            width: 300px;
            margin: 50px auto;
        }
        label, input {
            display: block;
            width: 100%;
            margin-bottom: 10px;
        }
        .button-group {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }
        input[type="submit"] {
            width: 120px;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        input[type="button"] {
            width: 120px;
            padding: 10px;
            background-color: #f44336;
            color: white;
            border: none;
            cursor: pointer;
        }
        input[type="submit"]:hover, input[type="button"]:hover {
            opacity: 0.8;
        }
        .error {
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <h2>新規会員登録</h2>
    <form id="registrationForm">
        <label for="username">ユーザー名</label>
        <input type="text" id="username" name="username" placeholder="ユーザー名を入力してください">

        <label for="email">メールアドレス</label>
        <input type="email" id="email" name="email" placeholder="メールアドレスを入力してください">
        <span id="emailError" class="error"></span>

        <label for="password">パスワード</label>
        <input type="password" id="password" name="password" placeholder="パスワードを入力してください">
        <span id="passwordError" class="error"></span>

        <label for="confirmPassword">パスワード（確認）</label>
        <input type="password" id="confirmPassword" name="confirmPassword" placeholder="パスワードを再入力してください">
        <span id="confirmPasswordError" class="error"></span>

        <label for="dob">生年月日</label>
        <input type="date" id="dob" name="dob" placeholder="生年月日を入力してください">
        <span id="dobError" class="error"></span>

        <label for="phone">電話番号</label>
        <input type="tel" id="phone" name="phone" placeholder="電話番号を入力してください">
        <span id="phoneError" class="error"></span>

        <div class="button-group">
            <input type="button" value="入力をクリア" id="clearForm">
            <input type="submit" value="登録">
        </div>
    </form>

    <script>
        const registeredEmails = ["test@example.com"];
        const registrationForm = document.getElementById('registrationForm');
        const clearFormButton = document.getElementById('clearForm');

        const emailError = document.getElementById('emailError');
        const passwordError = document.getElementById('passwordError');
        const confirmPasswordError = document.getElementById('confirmPasswordError');
        const dobError = document.getElementById('dobError');
        const phoneError = document.getElementById('phoneError');

        // フォーム送信時のバリデーションチェック
        registrationForm.addEventListener('submit', function(event) {
            event.preventDefault();
            
            const username = document.getElementById('username').value;
            const email = document.getElementById('email').value;
            const password = document.getElementById('password').value;
            const confirmPassword = document.getElementById('confirmPassword').value;
            const dob = document.getElementById('dob').value;
            const phone = document.getElementById('phone').value;

            let isValid = true;
            emailError.textContent = '';
            passwordError.textContent = '';
            confirmPasswordError.textContent = '';
            dobError.textContent = '';
            phoneError.textContent = '';

            // バグ: メールアドレスのユニークチェックが無視されている
            if (registeredEmails.includes(email)) {
                emailError.textContent = 'このメールアドレスは既に登録されています。';
                isValid = false;
            }

            // バグ: パスワードバリデーションが不完全 (8文字未満でも通過)
            if (password.length < 8) {
                passwordError.textContent = 'パスワードは8文字以上で入力してください。';
                isValid = false;
            }

            // バグ: パスワードと確認パスワードが一致しなくても送信できる
            if (password !== confirmPassword) {
                confirmPasswordError.textContent = 'パスワードが一致しません。';
                isValid = false;
            }

            // バグ: 無効な生年月日（例: 未来の日付や存在しない日付）も許可される
            if (!dob) {
                dobError.textContent = '生年月日を入力してください。';
                isValid = false;
            }

            // バグ: 電話番号が10桁未満でも送信できる
            if (phone.length < 10) {
                phoneError.textContent = '電話番号は10桁以上で入力してください。';
                isValid = false;
            }

            // 正常なフォーム送信
            if (isValid) {
                alert('登録成功！');
                registeredEmails.push(email);
            }
        });

        // 入力をクリアするボタンの動作
        clearFormButton.addEventListener('click', function() {
            registrationForm.reset();
        });
    </script>
</body>
</html>
