javascript教程零基础网页表单验证实战案例详解

是不是很多零基础学做网页的朋友，都在表单验证这卡过壳？辛辛苦苦画好的登录框、注册页，用户随便输点东西就能提交，输错了也没提示；想加个 “密码不够长”“手机号格式错了” 的提醒，代码写了半天要么没反应，要么一提交就报错？其实啊，网页表单验证没那么难，新手只要跟着案例一步步做，不用背复杂语法也能学会。今天兔子哥就带大家用实战案例详解，从最简单的必填项验证到实时格式检查，零基础也能快速上手，一起往下看吧！
说到表单验证，你知道为啥非得做这个吗？要是不验证，用户输个空密码、错手机号都能提交，后台收一堆无效数据不说，用户自己也得回头重新填，体验特别差。就像兔子哥之前帮朋友改网站，他的注册页没加验证，结果收到一堆 “123” 当密码、“abc” 当手机号的无效信息，光清理就花了大半天 —— 这就是不做验证的麻烦。
下面先看个对比表，看看没验证和做好验证的表单差在哪：

表单类型	未做验证的情况	做好验证的情况
用户体验	输错了点提交才知道，得重填	边输边提示错误，及时修正
数据质量	后台收到无效数据，容易出 bug	只收符合要求的数据，稳定又安全
开发效率	后期要花时间清理错误数据	前期花点时间做验证，后期省大事

咱们先从最简单的 “必填项验证” 开始，这是所有表单都得有的基础功能。比如登录页的用户名和密码，用户没填就点提交，得提示 “请输入用户名”“密码不能为空”。
怎么做呢？你先在 HTML 里搭个简单的表单架子：
html

<form id="loginForm"><div><label>用户名：label><input type="text" id="username"><span class="tip">span> div><div><label>密码：label><input type="password" id="password"><span class="tip">span>div><button type="button" id="submitBtn">登录button>form>

然后写 JS 代码，给提交按钮加个点击事件，点击时检查输入框有没有内容：
javascript

// 找到按钮和输入框const submitBtn = document.getElementById("submitBtn");const username = document.getElementById("username");const password = document.getElementById("password");// 点击提交时验证submitBtn.onclick = function() {let canSubmit = true; // 标记能不能提交// 检查用户名if (username.value.trim() === "") {showTip(username, "请输入用户名");canSubmit = false;} else {clearTip(username); // 输入了就清空提示}// 检查密码if (password.value.trim() === "") {showTip(password, "请输入密码");canSubmit = false;} else {clearTip(password);}// 都填了就提示成功if (canSubmit) {alert("验证通过，准备登录！");}};// 显示错误提示的函数function showTip(input, message) {const tip = input.nextElementSibling;tip.textContent = message;tip.style.color = "red"; // 红色提示显眼}// 清空提示的函数function clearTip(input) {const tip = input.nextElementSibling;tip.textContent = "";}

你看，这样点提交按钮时，没填的输入框下面就会显示红色提示，填了就不提示，是不是很简单？新手刚开始学，别想着一步到位，先把这种基础验证做好再说。
学会了必填项验证，咱们进阶一点，做个 “格式验证”。比如手机号必须是 11 位数字，密码不能少于 6 位，这种格式要求怎么用 JS 实现呢？
拿手机号验证举例，你先在刚才的表单里加个手机号输入框，然后写个验证函数，用 “正则表达式” 检查格式（正则不用背，直接抄这个就行）：
javascript

// 给手机号输入框加验证function checkPhone() {const phone = document.getElementById("phone").value.trim();// 手机号正则：1开头，后面跟10位数字const phoneRule = /^1[3-9]\d{9}$/;if (phone === "") {showTip(phoneInput, "请输入手机号");return false;} else if (!phoneRule.test(phone)) {showTip(phoneInput, "请输入11位有效手机号");return false;} else {clearTip(phoneInput);return true;}}

然后在提交验证时调用这个函数：
javascript

// 提交按钮点击事件里加一行const isPhoneOk = checkPhone();canSubmit = canSubmit && isPhoneOk;

这样用户输错手机号格式，比如输了 10 位数字，或者开头不是 1，下面就会提示 “请输入 11 位有效手机号”，比只验证必填项更实用。
你知道吗？现在很多网站都用 “实时验证”，就是用户边输入边提示错误，不用等点提交。这种交互体验更好，怎么做呢？其实就是给输入框加个 “input 事件”，输入内容时就触发验证函数。
比如给手机号输入框加实时验证：
javascript

const phoneInput = document.getElementById("phone");phoneInput.oninput = function() {checkPhone(); // 输入时就验证，不用等提交};

这样用户输手机号时，输到第 5 位就可能看到提示，输够 11 位数字且格式对了，提示就自动消失，比点提交后才发现错误方便多了。新手可能会问：“实时验证会不会影响性能？” 其实不会，这种简单验证对网页速度没啥影响，放心用就行。
最后咱们整合一下，做个完整的注册表单验证案例，包含必填项、格式、实时提示这几个功能。你跟着步骤做，做完就能直接用在自己的网页上：

1. 先写 HTML 结构，包含用户名、手机号、密码、确认密码这几个输入框；
2. 写 CSS 样式，让提示信息在输入框下面显示，错误提示用红色；
3. 写 JS 验证函数，分别检查每个输入框的必填和格式；
4. 给每个输入框加 input 事件，实现实时验证；
5. 提交按钮点击时，调用所有验证函数，全通过才允许提交。

兔子哥在教新手的时候，发现很多人容易犯一个错：验证函数里忘了返回 true 或 false，导致提交按钮不知道该不该允许提交。所以你写验证函数时，一定要记得验证通过返回 true，不通过返回 false，这样才能用 canSubmit 变量判断能不能提交。
其实啊，表单验证的核心逻辑就这几步：检查输入内容、显示错误提示、控制提交按钮状态。新手刚开始学，别想着一下子做特别复杂的，先把必填项和简单格式验证做好，熟练了再加更细的规则，比如密码必须包含字母和数字。
还有个小技巧，你可以把常用的验证函数存起来，比如检查手机号、邮箱的函数，下次做表单时直接复制用，不用重复写。平时多看看别人的表单是怎么验证的，比如你注册账号时，注意人家的提示是怎么显示的，模仿着做就能进步很快。
最后想说，表单验证是网页开发的基本功，做好了能让你的网页看起来更专业，用户用着也舒服。新手别怕犯错，多敲几遍代码，遇到没反应的情况，先检查输入框 id 是不是拼错了，函数有没有调用，这些小细节最容易出问题。跟着今天的案例多练几次，你会发现表单验证真的没那么难！

标签： 花点时间 辛辛苦苦