JavaScript 表单验证

什么是表单验证

用户在表单里填写姓名、邮箱、密码等内容后，浏览器要把数据提交给服务器。如果允许空值、乱填的邮箱、太短的密码直接提交，服务器就要处理大量非法数据。表单验证就是在提交前检查输入是否合法、立刻给出提示，让用户当场改正。

用 JavaScript 做即时校验

在输入框失焦（blur）或按键（keyup）时调用校验函数，用户边输入边得到反馈：

<input type="text" id="name" placeholder="请输入姓名">
<p id="nameTip" style="color:red"></p>
<script>
document.getElementById("name").onblur = function () {
    var v = this.value.trim();
    var tip = document.getElementById("nameTip");
    if (v === "") {
        tip.innerHTML = "姓名不能为空";
    } else if (v.length < 2) {
        tip.innerHTML = "姓名至少 2 个字";
    } else {
        tip.innerHTML = "✓ 姓名可用";
    }
};
</script>

效果：输入框失去焦点时，按规则在下方显示对应提示文字。

用正则校验邮箱

常见的邮箱格式可以用正则表达式匹配：

function isEmail(str) {
    return /^\w+@\w+(\.\w+)+$/.test(str);
}
console.log(isEmail("tom@qq.com")); // 输出：true
console.log(isEmail("abc@qq"));     // 输出：false

校验密码强度

逐条检查长度与字符组成，给出具体提示：

function checkPassword(pwd) {
    if (pwd.length < 6) {
        return "密码至少 6 位";
    }
    if (!/[0-9]/.test(pwd) || !/[a-zA-Z]/.test(pwd)) {
        return "密码需同时包含字母和数字";
    }
    return "密码强度合格";
}
console.log(checkPassword("12345"));  // 输出：密码至少 6 位
console.log(checkPassword("abc123")); // 输出：密码强度合格

在提交时统一验证

onsubmit 事件里做最终检查，返回 false 可以阻止表单提交：

<form id="myForm">
    <input type="text" id="phone" placeholder="手机号">
    <button type="submit">注册</button>
</form>
<script>
document.getElementById("myForm").onsubmit = function () {
    var phone = document.getElementById("phone").value;
    if (!/^1\d{10}$/.test(phone)) {
        alert("手机号格式不正确");
        return false; // 阻止提交
    }
    return true; // 允许提交
};
</script>

效果：手机号不合法时点击注册不会提交，并弹出提示。

提醒：客户端验证只为改善用户体验，服务器端仍然必须做同样的校验，因为用户可以绕过浏览器直接提交数据。

小结

表单验证分两步走：输入过程中即时提示、提交时统一把关；配合 trim() 去空格、正则匹配和 onsubmit 返回 false，就能做出友好又可靠的表单。