js前端设计模式优化50%表单校验代码示例

目录

• 表单校验
• 背景
• 常规写法：
• 策略模式介绍
• 真实世界类比
• 更广义的“算法”
• 策略模式的组成
• 利用策略模式改写
• 策略模式优缺点
• 优点：
• 缺点：
• 策略模式适合应用场景
• 总结

表单校验

背景

假设我们正在编写一个注册页面，在点击注册按钮之时，有如下几条校验逻辑：

• 用户名不能为空
• 密码长度不能少于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 函数的内部实现，这是违反开放-封闭原则的。
• 算法的复用性差，如果在项目中增加了另外一个表单，这个表单也需要进行一些类似的校验，我们很可能将这些校验逻辑复制得漫天遍野。

如何避免上述缺陷，更优雅地实现表单校验呢？

策略模式介绍