登錄表單驗證：用戶名僅限英文字母、4-10 字節、非空的 JavaScript 實現

需求

• 用戶名只能包含英文字母（A-Z, a-z）。
• 長度 4-10 字節（中文佔 2 字節，英文佔 1 字節）。
• 不能為空，錯誤時攔截提交並提示。

完整驗證代碼

<form onsubmit="return validateForm()">
    <input type="text" id="username" name="username" />
    <span id="msg" style="color:red"></span>
    <button type="submit">登錄</button>
</form>

<script>
function validateForm() {
    var val = document.getElementById('username').value;
    var msgEl = document.getElementById('msg');
    
    // 1. 非空
    if (!val.trim()) {
        msgEl.textContent = '用戶名不能為空';
        return false;
    }
    // 2. 僅英文字母
    if (!/^[A-Za-z]+$/.test(val)) {
        msgEl.textContent = '用戶名只能包含英文字母';
        return false;
    }
    // 3. 字節長度 4-10
    var byteLen = val.replace(/[^\x00-\xff]/g, '**').length; // 中文算 2 字節
    if (byteLen < 4 || byteLen > 10) {
        msgEl.textContent = '用戶名長度必須為 4-10 字節';
        return false;
    }
    msgEl.textContent = '';
    return true; // 通過驗證，允許提交
}
</script>

關鍵點解析

• /^[A-Za-z]+$/：正則匹配全英文字母。
• val.replace(/[^\x00-\xff]/g, '**').length：將非 ASCII 字符（中文等）替換為兩個字符，從而計算字節長度。
• onsubmit="return validateForm()"：驗證失敗返回 false 阻止表單提交。

進階建議

• 使用 HTML5 原生屬性 pattern="[A-Za-z]{4,10}" 實現瀏覽器級驗證（但無法精確控制字節長度）。
• 引入成熟驗證庫（如 jquery-validation、vee-validate）統一管理規則。
• 後端必須再次驗證，前端驗證僅為用戶體驗，不可信任。