JavaScript(JS)表单验证详解

上一节我们详细讲解了JS中的错误处理机制，本节我们将详细讲解JS中表单验证方法。

情景：在浏览器填写表单时，我们通常会填写用户名、电话号码、密码等信息，一般来说，这些填写信息都有一定的要求。比如电话号码只能是11位，不可能是12位或者是10位；密码会要求是6位以上，包含字母和特殊字符。

必要性：通过JS来规范表单信息，可以减轻服务器压力，提高用户体验和节省带宽。

怎么做：

1. 可以使用HTML内置验证方式：

<!-- 必填字段 -->
<input type="text" required>
<!-- 最小长度验证 -->
<input type="text" minlength="6" maxlength="20">
<!-- 正则表达式验证 -->
<input type="text" pattern="[A-Za-z]{3,}">
<!-- 邮箱验证 -->
<input type="email">
<!-- 网址验证 -->
<input type="url">
<!-- 自定义错误提示 -->
<input type="text" pattern="\d{11}" title="请输入11位手机号码">

2. 充分利用正则表达式：

// 手机号验证
function validatePhone(phone) {
    const phoneRegex = /^1[3-9]\d{9}$/;
    return phoneRegex.test(phone);
}
// 邮箱验证
function validateEmail(email) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
}
// 密码强度验证
function validatePassword(password) {
    // 至少6位，包含字母和数字
    const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d).{6,}$/;
    return passwordRegex.test(password);
}

总结：通过JS的预处理对表单信息进行首次“筛选”，可以及时反馈信息，实现在提高信息准确性的同时优化了用户体验。