在前端的開發中,除了切版與串 API 外,大部分的時間都在針對表單內容進行檢核、驗證、阻擋,一方面是讓使用者在操作頁面的過程中有良好的使用者體驗,不會因為一些例外狀況(Edge Case),例如:莫名其妙的 4xx
錯誤,導致使用者卡在某個操作流程中逃不出來,另一方面是讓傳遞到後端的資料更加正確,避免浪費不必要的網路請求與運算成本。
即便前端資料檢核可以說是非常重要的步驟,越嚴謹的驗證規則越會讓工程師額外多花一些時間進行開發與測試,因此常常會聽到怕麻煩的前端工程師說:「後端有做檢核,為什麼前端還要再做一次?」
以前剛接觸前端的時候我也會困惑這個問題,隨著自己經手過幾個大型的電子商務平台後,才慢慢意識到前端表單檢核、驗證的好處,由於表單驗證的好處多過於壞處,我們就來聊聊前端偷懶不做表單驗證可能會發生的危機吧:
經過上述的說明,大概可以理解前端的表單驗證除了在開發上會比較花時間外,基本上能稱得上百利無一害,接著就來聊聊前端一些針對格式的檢核方式:
const isEmpty = (value) => {
return value === null || value === undefined || value === '';
};
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
以上只能檢核最基本的資料正確性,避免在打 API 時,出現不必要的請求錯誤,至於一些避免攻擊手段的方式,目前還沒有理解到很多,也許之後有機會可以再跟大家分享。
希望今天的文章可以讓大家更加理解前端做表單檢核的重要性與必要性,如果有任何問題都歡迎在下方留言跟我說,我是 Vivian,我們下次見!