js教程零基础如何用函数实现表单验证功能

填表单时是不是遇到过这种情况？输完手机号点提交，才提示 “格式错误”；密码明明输对了，却因为没填确认密码被打回？新手做表单总忽略验证，结果用户体验差不说，还可能收到一堆无效数据。其实用 JS 函数就能轻松实现表单验证，实时提示错误，让用户边填边改。今天兔子哥就带零基础的朋友一步步做，从 HTML 结构到函数编写，每个步骤都讲透，保证你看完就会用函数实现表单验证！

一、为啥要用函数做表单验证？新手必懂的好处

Q：“直接在提交按钮里写验证代码不行吗？为啥非得用函数？”
A：当然不行！如果所有验证代码堆在一起，改一个字段的规则就得翻半天，还容易出错。用函数把每个验证逻辑分开，比如用户名验证一个函数、手机号验证一个函数，既好懂又好改，出问题了也能快速定位。就像收拾房间，按类别分抽屉放东西，找的时候才方便，函数就是验证逻辑的 “分类抽屉”。

用函数做验证的 3 个好处：

1. 逻辑清晰：每个字段的验证单独写，不混在一起；
2. 重复使用：实时输入验证和提交验证能共用同一个函数；
3. 方便修改：想改验证规则，只改对应函数就行，不用动其他代码。

二、第一步：搭 HTML 表单结构，给验证打基础

要做验证，先得有个表单。咱们做个包含用户名、手机号、密码的注册表单，每个输入框配个提示区，用来显示错误信息。

简单实用的 HTML 结构：

html

<form id="regForm"><div><label>用户名：label><input type="text" id="username" placeholder="3-10位字母或数字"><span class="tip" id="userTip">span> div><div><label>手机号：label><input type="tel" id="phone" placeholder="请输入11位手机号"><span class="tip" id="phoneTip">span>div><div><label>密码：label><input type="password" id="password" placeholder="至少6位"><span class="tip" id="pwdTip">span>div><button type="button" onclick="checkAll()">注册button>form>

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

三、核心步骤：写验证函数，让每个字段 “各归其责”

每个字段的验证规则不一样，咱们给每个字段写一个验证函数，返回true（通过）或false（不通过），再把错误提示显示出来。

1. 用户名验证函数：检查长度和格式

用户名要求 3-10 位，只能是字母或数字，函数这么写：
javascript

// 用户名验证函数function checkUsername() {// 获取输入框的值和提示区const username = document.getElementById("username").value;const tip = document.getElementById("userTip");// 验证规则：不为空，长度3-10位if (username === "") {tip.innerText = "用户名不能为空哦！";tip.style.color = "red";return false; // 验证失败返回false} else if (username.length < 3 || username.length > 10) {tip.innerText = "请输入3-10位字符！";tip.style.color = "red";return false;} else {tip.innerText = "用户名可用~";tip.style.color = "green";return true; // 验证通过返回true}}

2. 手机号验证函数：用正则检查格式

手机号得是 11 位数字，以 1 开头，用简单正则判断：
javascript

// 手机号验证函数function checkPhone() {const phone = document.getElementById("phone").value;const tip = document.getElementById("phoneTip");// 正则：1开头，后面跟10位数字const phoneReg = /^1[3-9]\d{9}$/;if (phone === "") {tip.innerText = "手机号不能为空！";tip.style.color = "red";return false;} else if (!phoneReg.test(phone)) {tip.innerText = "请输入正确的11位手机号！";tip.style.color = "red";return false;} else {tip.innerText = "手机号格式正确~";tip.style.color = "green";return true;}}

3. 密码验证函数：检查长度

密码至少 6 位，函数这样写：
javascript

// 密码验证函数function checkPassword() {const password = document.getElementById("password").value;const tip = document.getElementById("pwdTip");if (password === "") {tip.innerText = "密码不能为空！";tip.style.color = "red";return false;} else if (password.length < 6) {tip.innerText = "密码至少6位哦！";tip.style.color = "red";return false;} else {tip.innerText = "密码合格~";tip.style.color = "green";return true;}}

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

光提交时验证不够，最好用户输入时就实时提示，哪里错了立马改。给输入框加oninput事件，输入时自动调用验证函数。

给输入框加实时验证事件：

在 HTML 的 input 标签里加oninput属性，比如：
html

<input type="text" id="username" oninput="checkUsername()" ...><input type="tel" id="phone" oninput="checkPhone()" ...><input type="password" id="password" oninput="checkPassword()" ...>

这样用户每输一个字符，对应的验证函数就会触发，错误提示实时更新。有个学员加了实时验证后，用户表单提交成功率提高了不少，毕竟谁也不想填完一堆内容才被打回重来。

五、提交验证：所有字段都通过才允许提交

实时验证是为了用户体验，提交时还得再检查一遍，确保所有字段都通过。写个总验证函数，调用前面的所有验证函数，全返回true才允许提交。

总验证函数这么写：

javascript

function checkAll() {// 调用所有验证函数，存结果const isUserOk = checkUsername();const isPhoneOk = checkPhone();const isPwdOk = checkPassword();// 全通过才提交if (isUserOk && isPhoneOk && isPwdOk) {alert("验证通过，准备提交！");// 这里可以写提交到后台的代码} else {alert("还有错误没改哦，看提示修改~");}}

关键：每个小验证函数必须返回true或false，不然总函数没法判断。新手常漏写return，导致isUserOk一直是undefined，提交永远失败，这点要记牢。

六、常见错误对照表：这些坑新手最容易踩

错误现象	原因	解决办法
实时验证没反应	没加 oninput 事件，或事件名拼错	给 input 加 oninput="函数名 ()"，检查函数名是否正确
总验证函数永远返回 false	小验证函数漏写 return，或返回值不对	确保每个函数都有 return true/false
提示文字不显示	提示区 id 拼错，或 innerText 写成 innerHtml	检查 id 是否和 getElementById 一致，用 innerText 显示文字
正则验证总失败	正则表达式写错，比如手机号少了 \d	手机号正则用 /^1 [3-9]\d {9}$/，多测试几个号码

七、自问自答：新手最常问的 2 个问题

Q：“想给密码加确认密码验证，怎么加函数？”
A：再写个checkConfirmPwd函数，获取密码和确认密码的值，判断是否相等：
javascript

function checkConfirmPwd() {const pwd = document.getElementById("password").value;const confirmPwd = document.getElementById("confirmPwd").value;const tip = document.getElementById("confirmTip");if (confirmPwd !== pwd) {tip.innerText = "两次密码不一样！";return false;} else {tip.innerText = "密码一致~";return true;}}

记得在总验证函数里加const isConfirmOk = checkConfirmPwd();，并在条件里判断。
Q：“验证通过后怎么真的提交表单？”
A：可以用fetch发请求，或改按钮类型为submit，在总函数里返回true：
javascript

function checkAll() {// 验证逻辑...if (allOk) {document.getElementById("regForm").submit(); // 提交表单}}

兔子哥觉得，用函数实现表单验证的关键是 “分而治之”，把复杂的验证拆成小函数，每个函数只干一件事。刚开始练的时候不用追求复杂规则，先实现非空验证、长度验证，跑通流程再慢慢加正则、确认密码这些功能。
我带的学员里，有个完全零基础的，按这个步骤练了 2 小时，就做出了带实时提示的注册表单。其实 JS 函数没那么难，就像搭积木，每个函数是一块积木，拼起来就是完整的验证功能。现在就打开编辑器，把今天的例子敲一遍，遇到报错别慌，对照错误表改改，你会发现自己很快就能掌握用函数做表单验证啦！

标签： 零基础 第一步