js前端设计模式优化表单校验
前端唯一深情 人气:0表单校验
背景
假设我们正在编写一个注册页面，在点击注册按钮之时，有如下几条校验逻辑：
- 用户名不能为空
- 密码长度不能少于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 函数的内部实现，这是违反开放-封闭原则的。
- 算法的复用性差，如果在项目中增加了另外一个表单，这个表单也需要进行一些类似的校验，我们很可能将这些校验逻辑复制得漫天遍野。
如何避免上述缺陷，更优雅地实现表单校验呢？
策略模式介绍
加载全部内容