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

在前端的開發中，除了切版與串 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 = '[email protected]';
  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
  

以上只能檢核最基本的資料正確性，避免在打 API 時，出現不必要的請求錯誤，至於一些避免攻擊手段的方式，目前還沒有理解到很多，也許之後有機會可以再跟大家分享。

希望今天的文章可以讓大家更加理解前端做表單檢核的重要性與必要性，如果有任何問題都歡迎在下方留言跟我說，我是 Vivian，我們下次見！