js教程实战案例：表单验证+数字小游戏开发，零基础也能学会

学了 JS 基础语法却不知道怎么用？看着别人做的表单能实时提示错误、小游戏能互动玩起来，自己却连简单功能都敲不出来？其实啊，JS 入门最有效的方法就是动手做实战案例。今天兔子哥就带零基础的朋友做两个超实用的案例 —— 表单验证和数字小游戏，步骤拆解得明明白白，代码能直接抄着用，做完你会发现，原来 JS 实战没那么难，甚至还挺有意思！

一、表单验证：让用户输入更规范，新手必学的实用功能

为啥要做表单验证？

填过注册页的朋友都知道，要是没验证，用户可能输错手机号、密码太短就提交，后台收到一堆无效数据。表单验证就是在用户提交前检查输入，实时提示错误，既减少后台麻烦，又让用户知道哪里错了。

实战步骤：做一个带实时提示的注册表单

1. 先搭 HTML 结构，输入框和提示区安排上

html

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

2. 写 JS 验证逻辑，实时检查输入

给每个输入框加oninput事件，输入时就验证，不用等提交：
javascript

// 用户名验证：3-10位字母或数字function checkUsername() {const username = document.getElementById("username").value;const tip = document.getElementById("userTip");if (username === "") {tip.innerText = "用户名不能为空哦！";tip.style.color = "red";return 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;}}// 手机号验证：11位数字function checkPhone() {const phone = document.getElementById("phone").value;const tip = document.getElementById("phoneTip");// 简单正则：1开头，后面10位数字const phoneReg = /^1[3-9]\d{9}$/;if (!phoneReg.test(phone)) {tip.innerText = "请输入正确的11位手机号！";tip.style.color = "red";return false;} else {tip.innerText = "手机号格式正确~";tip.style.color = "green";return true;}}// 密码验证：至少6位function checkPassword() {const password = document.getElementById("password").value;const tip = document.getElementById("pwdTip");if (password.length < 6) {tip.innerText = "密码至少6位哦！";tip.style.color = "red";return false;} else {tip.innerText = "密码合格~";tip.style.color = "green";return true;}}// 全量验证：所有条件通过才提交function checkAll() {const isUserOk = checkUsername();const isPhoneOk = checkPhone();const isPwdOk = checkPassword();if (isUserOk && isPhoneOk && isPwdOk) {alert("注册成功！");}}

最后别忘了给输入框加oninput：
html

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

常见问题对照表

问题现象	可能原因	解决办法
提示不实时更新	没加 oninput 事件	给 input 加 oninput 调用验证函数
手机号验证总失败	正则写错，比如少了 \d	用正确正则：/^1 [3-9]\d {9}$/
提交按钮没反应	按钮 type 是 submit 没阻止默认行为	改成 type="button" 或加 return false

二、数字小游戏：猜数字游戏，边玩边学 JS 逻辑

游戏规则超简单

系统随机生成 1-100 的数字，用户输入猜测的数字，系统提示 “太大” 或 “太小”，直到猜中为止，还能记录猜的次数。这个游戏能练变量、条件判断、事件绑定，新手入门超合适。

实战步骤：从零搭建猜数字游戏

1. 搭 HTML 界面，输入框和提示区

html

<div><h3>猜数字游戏（1-100）h3><input type="number" id="guessNum" placeholder="输入你猜的数字"><button onclick="guess()">猜一猜button><p id="result">p> <p id="count">已猜次数：0p> div>

2. 写 JS 游戏逻辑，实现随机数和判断

javascript

// 生成1-100的随机数let randomNum = Math.floor(Math.random() * 100) + 1;let guessCount = 0; // 记录猜测次数function guess() {const userNum = parseInt(document.getElementById("guessNum").value);const result = document.getElementById("result");const countText = document.getElementById("count");// 检查输入是否有效if (isNaN(userNum) || userNum < 1 || userNum > 100) {result.innerText = "请输入1-100之间的数字！";result.style.color = "orange";return;}guessCount++; // 次数加1countText.innerText = `已猜次数：${guessCount}`;// 判断大小if (userNum > randomNum) {result.innerText = "太大啦！再小一点~";result.style.color = "blue";} else if (userNum < randomNum) {result.innerText = "太小啦！再大一点~";result.style.color = "blue";} else {result.innerText = `恭喜猜对啦！用了${guessCount}次~`;result.style.color = "green";// 猜对后禁用输入和按钮document.getElementById("guessNum").disabled = true;document.querySelector("button").disabled = true;}}

游戏升级小技巧

想让游戏更好玩？可以加个 “重新开始” 按钮：
html

<button onclick="restart()">重新开始button>

javascript

function restart() {randomNum = Math.floor(Math.random() * 100) + 1;guessCount = 0;document.getElementById("guessNum").value = "";document.getElementById("guessNum").disabled = false;document.querySelector("button").disabled = false;document.getElementById("result").innerText = "";document.getElementById("count").innerText = "已猜次数：0";}

三、零基础学习心得：实战案例才是最好的老师

兔子哥带过不少零基础学员，发现很多人学 JS 卡在 “学了语法不会用”，其实就是练得太少，尤其是实战案例练得不够。这两个案例虽然简单，但包含了 JS 核心知识点：变量存数据、函数封装功能、事件绑定交互、条件判断逻辑，这些都是做复杂功能的基础。
刚开始敲代码肯定会报错，比如表单验证时提示不显示，可能是 ID 拼错了；猜数字游戏没反应，或许是Math.random()用法不对。这时候别慌，按 F12 看控制台报错，大部分问题都是小细节，改对了就好。
有个学员做完这两个案例后，自己试着给猜数字游戏加了 “难度选择” 功能，能选 1-50 或 1-200 的范围，这就是进步。所以啊，新手别怕修改代码，哪怕是改个提示文字、调个数字范围，都是在积累经验。
JS 学习没有捷径，多敲、多试、多改，从简单案例开始，慢慢就能做更复杂的功能。现在就打开编辑器，把这两个案例敲一遍，遇到问题就调试，你会发现自己越来越顺手，成就感也会越来越强！

标签： checkUsername 最有效