首頁 > 軟體

js前端設計模式優化50%表單校驗程式碼範例

2022-06-20 22:00:10

目錄

表單校驗

背景
常規寫法：

策略模式介紹

真實世界類比
更廣義的“演演算法”
策略模式的組成
利用策略模式改寫

策略模式優缺點

優點：
缺點：

策略模式適合應用場景

總結

表單校驗

背景

假設我們正在編寫一個註冊頁面，在點選註冊按鈕之時，有如下幾條校驗邏輯：

使用者名稱不能為空
密碼長度不能少於6位
手機號碼必須符合格式

常規寫法：

const form = document.getElementById('registerForm');
form.onsubmit = function () {
  if (form.userName.value === '') {
    alert('使用者名稱不能為空');
    return false;
  }
  if (form.password.value.length < 6) {
    alert('密碼長度不能少於6位');
    return false;
  }
  if (!/^1[3|5|8][0-9]{9}$/.test(form.phoneNumber.value)) {
    alert('手機號碼格式不正確');
    return false;
  }
  ...
}

這是一種很常見的程式碼編寫方式，但它有許多缺點：

onsubmit 函數比較龐大，包含了很多 if-else 語句，這些語句需要覆蓋所有的校驗規則。
onsubmit 函數缺乏彈性，如果增加了一種新的校驗規則，或者想把密碼的長度從6改成8，我們都必須深入 obsubmit 函數的內部實現，這是違反開放-封閉原則的。
演演算法的複用性差，如果在專案中增加了另外一個表單，這個表單也需要進行一些類似的校驗，我們很可能將這些校驗邏輯複製得漫天遍野。

如何避免上述缺陷，更優雅地實現表單校驗呢？

策略模式介紹

IT145.com E-mail:sddin#qq.com