javascript教程实战中表单验证功能怎么实现

做网页时是不是遇到过这种情况？用户填表单时随便输点内容就提交，结果手机号输成字母、密码只写两位，后台收到一堆无效数据？或者用户填完点提交，页面直接刷新，啥错误提示都没有，人家根本不知道哪填错了？其实啊，这些问题都能用 JavaScript 表单验证解决。新手总觉得表单验证很难，又是正则又是事件的，其实跟着步骤来，一点都不难。今天兔子哥就手把手教你怎么实现表单验证，从 HTML 结构到 JS 逻辑，再到实时提示，附上学员踩过的坑，新手跟着做，你的表单也能既安全又友好！

一、先搭 HTML 结构：表单验证的 “基础框架”

做验证前，得先有个像样的表单。一个完整的注册表单通常有用户名、手机号、密码、确认密码这几个字段，每个字段加个提示区，用来显示错误信息。

简单又实用的 HTML 结构

html

<form id="regForm"><div><label>用户名：label><input type="text" id="username" placeholder="请输入用户名"><span class="error" id="userError">span> div><div><label>手机号：label><input type="tel" id="phone" placeholder="请输入手机号"><span class="error" id="phoneError">span>div><div><label>密码：label><input type="password" id="password" placeholder="请输入密码"><span class="error" id="pwdError">span>div><div><label>确认密码：label><input type="password" id="confirmPwd" placeholder="请再次输入密码"><span class="error" id="confirmError">span>div><button type="button" onclick="validateForm()">提交button>form>

这里有个小细节：按钮类型用button而不是submit，避免点提交时页面自动刷新，等验证通过了咱们再手动处理提交。之前有个学员用了submit，结果验证还没通过，表单就提交了，折腾半天才找到原因。

二、写 JS 验证逻辑：表单验证的 “核心大脑”

验证逻辑是表单验证的灵魂，得检查每个字段是不是符合要求。咱们一步一步来，先写单个字段的验证，再组合起来做整体验证。

1. 单个字段的验证函数：各司其职

每个字段的验证规则不一样，最好分开写函数，看着清楚，改起来也方便。

• 用户名验证：不为空，长度 3-10 位

javascript

function checkUsername() {const username = document.getElementById("username").value;const error = document.getElementById("userError");if (username === "") {error.innerText = "用户名不能为空哦！";return false; // 验证失败返回false} else if (username.length < 3 || username.length > 10) {error.innerText = "用户名长度要在3-10位之间！";return false;} else {error.innerText = ""; // 验证通过清空错误return true; // 验证通过返回true}}

• 手机号验证：11 位数字，用简单正则判断

javascript

function checkPhone() {const phone = document.getElementById("phone").value;const error = document.getElementById("phoneError");// 简单的手机号正则：1开头，11位数字const phoneReg = /^1[3-9]\d{9}$/;if (phone === "") {error.innerText = "手机号不能为空！";return false;} else if (!phoneReg.test(phone)) {error.innerText = "请输入正确的11位手机号！";return false;} else {error.innerText = "";return true;}}

• 密码和确认密码验证：密码至少 6 位，两次输入一致

javascript

function checkPassword() {const password = document.getElementById("password").value;const error = document.getElementById("pwdError");if (password === "") {error.innerText = "密码不能为空！";return false;} else if (password.length < 6) {error.innerText = "密码至少6位哦！";return false;} else {error.innerText = "";return true;}}function checkConfirmPwd() {const password = document.getElementById("password").value;const confirmPwd = document.getElementById("confirmPwd").value;const error = document.getElementById("confirmError");if (confirmPwd === "") {error.innerText = "请确认密码！";return false;} else if (confirmPwd !== password) {error.innerText = "两次密码输入不一致！";return false;} else {error.innerText = "";return true;}}

2. 整体验证函数：所有字段都通过才提交

单个字段验证好了，再写个整体函数，调用所有验证函数，全通过了才允许提交。
javascript

function validateForm() {// 调用所有验证函数const isUserOk = checkUsername();const isPhoneOk = checkPhone();const isPwdOk = checkPassword();const isConfirmOk = checkConfirmPwd();// 全通过才提交if (isUserOk && isPhoneOk && isPwdOk && isConfirmOk) {alert("表单验证通过，准备提交！");// 这里可以写提交到后台的代码}}

三、加实时验证：用户边填边提示，体验更好

光点提交才提示不够友好，最好用户输入时就实时验证，哪里错了立马显示，人家改起来也方便。这时候就得用oninput事件。

给输入框加实时验证事件

在 HTML 的 input 标签里加oninput，输入时自动调用对应验证函数：
html

<input type="text" id="username" oninput="checkUsername()" placeholder="请输入用户名"><input type="tel" id="phone" oninput="checkPhone()" placeholder="请输入手机号"><input type="password" id="password" oninput="checkPassword()" placeholder="请输入密码"><input type="password" id="confirmPwd" oninput="checkConfirmPwd()" placeholder="请再次输入密码">

这样用户输完一个字符，验证就会触发，错误提示实时更新。有个做电商网站的学员加了实时验证后，用户表单提交成功率提高了 40%，人家说 “用户知道哪错了，改得快，自然愿意完成注册”。

四、美化错误提示：让用户一眼看到问题

错误提示不能就干巴巴一行字，得醒目点，但又不能太刺眼。加点 CSS 样式，让提示更友好。

简单的错误提示样式

css

.error {color: #ff4d4f; /* 红色提示 */font-size: 12px;margin-left: 10px;}input:focus {outline: none;border: 1px solid #1890ff; /* 聚焦时边框变蓝 */}input.error {border: 1px solid #ff4d4f; /* 验证失败时边框变红 */}

再在 JS 验证函数里加一句，验证失败时给输入框加error类：
javascript

// 在checkUsername的else if里加error.innerText = "用户名长度要在3-10位之间！";document.getElementById("username").className = "error"; // 加错误类// 验证通过时移除else {error.innerText = "";document.getElementById("username").className = ""; // 移除错误类return true;}

这样输入框不仅有文字提示，边框还会变红，用户一眼就知道哪出问题了。

五、避坑指南：新手做表单验证常踩的 4 个坑

1. 正则表达式太复杂，自己绕晕自己

刚开始别用太复杂的正则，比如手机号验证，先用/^1[3-9]\d{9}$/这种简单的，能判断 11 位数字就行，等熟练了再加更细的规则。之前有个学员上来就用几十位的正则，结果自己都看不懂，调试半天没效果。

2. 忘记阻止表单默认提交

如果按钮用了submit类型，没加阻止默认行为的代码，验证还没通过表单就提交了。解决办法：要么用button类型，要么在表单的onsubmit里返回false：
html

<form id="regForm" onsubmit="return false;"> 

3. 错误提示不及时清空

验证通过后没清空错误提示，导致用户改对了，错误文字还在。记住：每个验证函数的 “通过” 分支里，一定要加error.innerText = ""。

4. 实时验证太频繁，影响性能

oninput事件每次输入都会触发，别在里面写太复杂的逻辑。如果验证函数里有大量计算，可以用setTimeout延迟一下，比如输入停止 500 毫秒再验证，但新手阶段暂时用不到这么复杂的优化。

六、自问自答：新手最常问的几个问题

Q：“表单验证一定要用正则吗？不用行不行？”
A：简单验证不用也行，比如判断长度、是否为空，用if语句就行。但手机号、邮箱这种有固定格式的，用正则最方便，不用自己写一堆if判断。
Q：“验证通过后怎么提交到后台？”
A：可以用fetch或axios发请求，比如在validateForm的if里加：
javascript

// 验证通过后提交fetch("注册接口地址", {method: "POST",body: JSON.stringify({username: username,phone: phone,password: password})});

Q：“能不能做更高级的验证，比如用户名是否已被注册？”
A：可以！这需要调用后台接口查询，在checkUsername里加个fetch请求，拿到结果后再判断，但这属于进阶内容，新手先把基础验证做好再说。
兔子哥觉得，表单验证是前端的基本功，学会了不仅能减少无效数据，还能大大提升用户体验。刚开始练的时候不用追求完美，先实现最基本的非空验证、长度验证，跑通流程，再慢慢加实时提示、正则判断。
之前有个学员第一次做表单验证，光是让错误提示正常显示就折腾了一下午，但练熟后，现在做个完整的验证表单半小时就能搞定。其实编程就是这样，看着难，动手做起来就会发现，步骤拆解开，每个部分都很简单。
现在就打开你的编辑器，照着今天的例子敲一遍代码，从 HTML 结构到 JS 逻辑，一步一步来。遇到报错别慌，看看是不是哪个函数名拼错了，或者事件没绑定对。练完这个例子，你会发现表单验证真没那么难，下次做网页时，再也不用担心用户乱填表单了！

标签： phoneError confirmPwd