PHP实现邮箱格式验证（需含@及至少一个.）与密码校验咨询

Got it, let's walk through how to implement your email validation and form submission logic properly, keeping everything organized with a separate validation file as you planned.

First, let's make a standalone validation.php file to hold all your validation logic—this keeps your code clean and reusable across other parts of your app later.

<?php
// validation.php

/**
 * Validate email format (meets your requirement: contains @ and at least one .)
 * @param string $email The input email to check
 * @return bool|string Returns true if valid, an error message otherwise
 */
function validateEmail($email) {
    // Basic check for required characters
    if (!str_contains($email, '@') || !str_contains($email, '.')) {
        return "Email must include both an @ symbol and at least one dot (.)";
    }
    // Optional: Add stricter validation with PHP's built-in filter (more reliable for real-world use)
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        return "Please enter a properly formatted email address";
    }
    return true;
}

/**
 * Add your password validation rules here (expand as needed)
 * @param string $password The input password to check
 * @return bool|string Returns true if valid, an error message otherwise
 */
function validatePassword($password) {
    // Example rule: minimum 8 characters (adjust to your needs)
    if (strlen($password) < 8) {
        return "Password must be at least 8 characters long";
    }
    // Add more rules like special characters, uppercase letters, etc., if needed
    return true;
}
?>

Update your register.php to include the email input field, matching the structure of your existing password row:

<!-- Insert this into your register.php form, after the password row -->
<div class="tRow">
    <div class="tCell"><label for="txtemail">Email:</label></div>
    <div class="tCell">
        <input type="email" id="txtemail" name="Email" required/>
        <!-- Optional: For frontend validation feedback -->
        <span id="emailError" style="color: red; display: none;"></span>
    </div>
</div>

Add a bit of JavaScript to give users immediate feedback before they submit the form—this improves UX, but remember backend validation is still mandatory (frontend checks can be bypassed).

<script>
// Validate email on blur
document.getElementById('txtemail').addEventListener('blur', function() {
    const email = this.value;
    const errorElement = document.getElementById('emailError');
    
    if (!email.includes('@') || !email.includes('.')) {
        errorElement.textContent = "Email needs both @ and a dot (.)";
        errorElement.style.display = "inline";
    } else {
        errorElement.style.display = "none";
    }
});

// Prevent form submission if frontend checks fail
document.querySelector('form').addEventListener('submit', function(e) {
    const email = document.getElementById('txtemail').value;
    const password = document.getElementById('txtpassword').value;
    let isValid = true;

    // Check email
    if (!email.includes('@') || !email.includes('.')) {
        isValid = false;
        document.getElementById('emailError').textContent = "Email needs both @ and a dot (.)";
        document.getElementById('emailError').style.display = "inline";
    }

    // Check password (match your backend rules)
    if (password.length < 8) {
        isValid = false;
        alert("Password must be at least 8 characters long");
    }

    if (!isValid) {
        e.preventDefault();
    }
});
</script>

Update register.php to handle form submissions, use the validation file, and process the input safely:

<?php
// Include the validation file at the top of register.php
require_once 'validation.php';

$errors = [];

// Check if the form was submitted via POST
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Sanitize input to avoid extra whitespace
    $email = trim($_POST['Email'] ?? '');
    $password = trim($_POST['Password'] ?? '');
    
    // Validate email
    $emailCheck = validateEmail($email);
    if ($emailCheck !== true) {
        $errors[] = $emailCheck;
    }
    
    // Validate password
    $passwordCheck = validatePassword($password);
    if ($passwordCheck !== true) {
        $errors[] = $passwordCheck;
    }
    
    // If no errors, proceed with registration
    if (empty($errors)) {
        // Hash the password (NEVER store plain text passwords!)
        $hashedPassword = password_hash($password, PASSWORD_DEFAULT);
        
        // Add your database insertion logic here (example with PDO)
        // $pdo = new PDO('mysql:host=localhost;dbname=your_db', 'user', 'pass');
        // $stmt = $pdo->prepare("INSERT INTO users (email, password) VALUES (?, ?)");
        // $stmt->execute([$email, $hashedPassword]);
        
        echo "Registration successful! 🎉";
        exit; // Stop execution after success
    }
}
?>

<!-- Display validation errors if any -->
<?php if (!empty($errors)): ?>
    <div style="color: red; margin-bottom: 1rem;">
        <?php foreach ($errors as $error): ?>
            <p><?php echo $error; ?></p>
        <?php endforeach; ?>
    </div>
<?php endif; ?>

<!-- Your full form HTML (including existing password row and new email row) -->
<form method="POST" action="register.php">
    <!-- Existing password row -->
    <div class="tRow">
        <div class="tCell"><label for="txtpassword">Password:</label></div>
        <div class="tCell">
            <input type="password" id="txtpassword" name="Password" required/>
        </div>
    </div>
    <!-- New email row -->
    <div class="tRow">
        <div class="tCell"><label for="txtemail">Email:</label></div>
        <div class="tCell">
            <input type="email" id="txtemail" name="Email" required/>
            <span id="emailError" style="color: red; display: none;"></span>
        </div>
    </div>
    <!-- Submit button -->
    <div class="tRow">
        <div class="tCell"></div>
        <div class="tCell">
            <button type="submit">Register</button>
        </div>
    </div>
</form>

<!-- Optional frontend validation script -->
<script>
document.getElementById('txtemail').addEventListener('blur', function() {
    const email = this.value;
    const errorElement = document.getElementById('emailError');
    
    if (!email.includes('@') || !email.includes('.')) {
        errorElement.textContent = "Email needs both @ and a dot (.)";
        errorElement.style.display = "inline";
    } else {
        errorElement.style.display = "none";
    }
});

document.querySelector('form').addEventListener('submit', function(e) {
    const email = document.getElementById('txtemail').value;
    const password = document.getElementById('txtpassword').value;
    let isValid = true;

    if (!email.includes('@') || !email.includes('.')) {
        isValid = false;
        document.getElementById('emailError').textContent = "Email needs both @ and a dot (.)";
        document.getElementById('emailError').style.display = "inline";
    }

    if (password.length < 8) {
        isValid = false;
        alert("Password must be at least 8 characters long");
    }

    if (!isValid) {
        e.preventDefault();
    }
});
</script>

内容的提问来源于stack exchange，提问作者Sozo Teki