假设我们正在编写一个注册页面,在点击注册按钮之时,有如下几条校验逻辑:
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; } ... }
这是一种很常见的代码编写方式,但它有许多缺点:
如何避免上述缺陷,更优雅地实现表单校验呢?