【前端基礎】為什麼前端要檢核表單內容？低成本優化前端使用者體驗

2025/02/07 更新2024/02/08 發佈閱讀 6 分鐘

在前端的開發中，除了切版與串 API 外，大部分的時間都在針對表單內容進行檢核、驗證、阻擋，一方面是讓使用者在操作頁面的過程中有良好的使用者體驗，不會因為一些例外狀況（Edge Case），例如：莫名其妙的 4xx 錯誤，導致使用者卡在某個操作流程中逃不出來，另一方面是讓傳遞到後端的資料更加正確，避免浪費不必要的網路請求與運算成本。

即便前端資料檢核可以說是非常重要的步驟，越嚴謹的驗證規則越會讓工程師額外多花一些時間進行開發與測試，因此常常會聽到怕麻煩的前端工程師說：「後端有做檢核，為什麼前端還要再做一次？」

以前剛接觸前端的時候我也會困惑這個問題，隨著自己經手過幾個大型的電子商務平台後，才慢慢意識到前端表單檢核、驗證的好處，由於表單驗證的好處多過於壞處，我們就來聊聊前端偷懶不做表單驗證可能會發生的危機吧：

缺乏表單驗證可能會出現的網頁危機

SQL 注入：資料庫乘載著網路服務中最寶貴的財產：「資料」，假設今天前端在打 API 不驗證傳遞過去的資料格式，而後端工程師也沒經過額外的處理就把這串資料直接丟到資料庫裡，萬一這串挾帶的資料中有任何程式碼片段，都有可能直接性的侵入資料庫進行程式碼的執行，嚴重還會出現資料庫整個被打包加密勒索、使用者資料外洩的狀況。雖然 SQL 注入的安全性檢核後端可能需要負更大的責任，但對前端而言，擋住一些不正確的輸入值，可以大大減輕後端在檢核這一塊的負擔。
XSS 攻擊：假設前端工程師沒有針對一些特殊符號做過濾，惡意攻擊軟體、駭客有機會往輸入框塞一些可被執行的腳本，造成光是在網頁使用服務，就有可能造成使用者資料的外洩。
不必要的伺服器成本：前端如果一直丟錯誤的資料格式到後端，可能會出現過多無效請求，直接影響到伺服器的維運成本，在一些以運算量為計價單位的雲服務，前端工程師的小偷懶，可能就會造成一些不必要的伺服器支出。
干擾使用者體驗：如果前端一直丟不符合後端 API 規範的參數打 API ，可以預期回傳錯誤情境的狀況會大大提高，在好一點的狀況中，前端可能會用一些彈窗、提示訊息捕捉例外錯誤情境，告訴使用者目前有些錯誤，需要調整表單內容，但不經驗證的內容，就會造成這些錯誤訊息一直在頁面上瘋狂跳出，干擾使用者體驗。最不好的狀況就是：既不做表單驗證，也不使用一些頁面彈窗、提示訊息讓使用者知道當前的頁面狀況，網站很容易因此流失使用者。
程式碼易出錯：姑且不論使用者的使用感受，不經驗證的欄位內容不僅難以從使用者介面上看出來，在程式碼的除錯也需要花額外的時間，也比較難在第一時間知道問題點：是資料沒有成功更新？事件沒有綁好？ API 有成功打出去嗎？是 API 的參數不符合規範嗎？程式碼出錯的原因百百種，不寫表單驗證就是其中一種。

前端的驗證手段

經過上述的說明，大概可以理解前端的表單驗證除了在開發上會比較花時間外，基本上能稱得上百利無一害，接著就來聊聊前端一些針對格式的檢核方式：

判斷是否為空值：在一個固定需要有值的欄位上，我們可以簡單寫一個 Util 函式來進行驗證，每當需要進行空值的檢核時就呼叫這個方法：
```
const isEmpty = (value) => {
    return value === null || value === undefined || value === '';
};
```

判斷是否符合特殊規則：在一些電子信箱、電話、發票等，有固定格式的欄位上，可以透過 Regex（正則表達式）來進行檢核，個人覺得除了刷題的需求外，在一般實務開發中不太需要去背 Regex 的一些規則，有在使用一些 AI 工具（chatGPT、copilot）的話，也能快速產生一些規範：

const basicFormValidator = {
    validateEmail: function(email) {
        const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$/;
        return emailRegex.test(email);
    },
    validatePhone: function(phone) {
        const phoneRegex = /^\\d{10}$/;
        return phoneRegex.test(phone);
    },
    validateLandline: function(landline) {
        const landlineRegex = /^\\d{8}$/;
        return landlineRegex.test(landline);
    },
    validatePassword: function(password) {
        // 設定你的密碼驗證規則，這只是一個範例
        const passwordRegex = /^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d]{8,}$/;
        return passwordRegex.test(password);
    }
};

// 使用範例
const email = 'test@example.com';
const phone = '1234567890';
const landline = '23456789';
const password = 'P@ssw0rd';

console.log(basicFormValidator.validateEmail(email)); // true
console.log(basicFormValidator.validatePhone(phone)); // true
console.log(basicFormValidator.validateLandline(landline)); // true
console.log(basicFormValidator.validatePassword(password)); // true