JavaScript 與 PHP 雙重驗證 URL 格式：正則表達式與 filter_var 實戰

前後端協同驗證 URL 完整方案

URL 驗證需在前端即時提示與後端嚴格把關雙層防護。本文提供現代化正則模式、PHP 內建過濾器、可達性檢測等多維度方案。

JavaScript 端驗證

現代正則（支援 HTTP/HTTPS、域名、IP、端口、路徑、查詢、錨點）

const URL_REGEX = /^https?:\/\/(?:(?:[A-Z0-9-]+\.)+[A-Z]{2,}|localhost|\d{1,3}(?:\.\d{1,3}){3})(?::\d+)?(?:\/[^\s]*)?$/i;

function isValidUrl(url) {
    return URL_REGEX.test(url);
}

// 使用新版 URL API（更語義化、自動解析組件）
function isValidUrlModern(url) {
    try {
        const u = new URL(url);
        return u.protocol === 'http:' || u.protocol === 'https:';
    } catch {
        return false;
    }
}

表單整合範例

<form id="urlForm">
    <input type="url" id="urlInput" placeholder="https://example.com" required>
    <button type="submit">提交</button>
</form>
<script>
document.getElementById('urlForm').addEventListener('submit', e => {
    e.preventDefault();
    const url = document.getElementById('urlInput').value.trim();
    if (!isValidUrlModern(url)) {
        alert('請輸入合法的 HTTP/HTTPS 網址');
        return;
    }
    // 送後端...
});
</script>

PHP 端驗證

方案一：filter_var（推薦，內建、維護性佳）

function isValidUrlPHP(string $url): bool {
    return filter_var($url, FILTER_VALIDATE_URL, FILTER_FLAG_HOST_REQUIRED) !== false;
}

方案二：正則（精細控制）

function isValidUrlRegex(string $url): bool {
    $pattern = '/^https?:\/\/(?:(?:[A-Z0-9-]+\.)+[A-Z]{2,}|localhost|\d{1,3}(?:\.\d{1,3}){3})(?::\d+)?(?:\/[^\s]*)?$/i';
    return (bool)preg_match($pattern, $url);
}

方案三：可達性檢測（謹慎使用，會產生網絡 IO）

function isUrlReachable(string $url, int $timeout = 5): bool {
    $ctx = stream_context_create([
        'http' => ['timeout' => $timeout, 'method' => 'HEAD'],
        'ssl' => ['verify_peer' => false, 'verify_peer_name' => false] // 僅測試用
    ]);
    @$headers = get_headers($url, 1, $ctx);
    return $headers && strpos($headers[0], '200') !== false;
}

驗證碼（CAPTCHA）前後端交互補充

驗證碼通常流程：

1. 前端請求 /captcha/image 獲取圖片與 Token
2. 用戶輸入後，前端將 {token, code} 送後端驗證
3. 後端比對 Session/Redis 中儲存的驗證碼，回傳結果

// 後端簡易示例
session_start();
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $input = strtoupper($_POST['captcha'] ?? '');
    $stored = $_SESSION['captcha_code'] ?? '';
    echo json_encode(['valid' => $input === $stored]);
    unset($_SESSION['captcha_code']); // 一次性
    exit;
}

最佳實踐總結

• 前端用 HTML5 <input type="url"> + URL API 做即時提示。
• 後端用 filter_var 做基礎格式校驗，業務需要時再做可達性檢測（異步隊列）。
• 不要相信 HTTP_REFERER，它可被偽造/攔截，不可作為安全依據。
• 所有用戶輸入的 URL 若需在頁面輸出，必須經 htmlspecialchars 編碼。