表单验证通过JavaScript在提交前检查数据有效性，首先构建包含用户名、邮箱、密码的HTML表单，接着绑定submit事件并阻止默认行为，调用validateForm()函数进行字段校验：用户名不能为空，邮箱需符合正则格式，密码长度不少于6位，任一失败则通过showError()显示错误信息并聚焦对应输入框，支持实时blur验证提升体验，最终验证通过后提交并清空表单。
表单验证是前端开发中确保用户输入数据有效性的关键步骤。使用 JavaScript 可以在数据提交到服务器前进行实时检查，提升用户体验并减少无效请求。以下是实现表单验证的常用方法和步骤。
1. 基础表单结构
先定义一个简单的 HTML 表单，包含用户名、邮箱和密码字段：
<form id="myForm"> <input type="text" name="username" placeholder="用户名" /> <input type="email" name="email" placeholder="邮箱" /> <input type="password" name="password" placeholder="密码" /> <button type="submit">提交</button> </form>
2. 绑定提交事件并阻止默认行为
通过 JavaScript 获取表单元素，监听提交事件，并阻止页面刷新：
const form = document.getElementById('myForm');
form.addEventListener('submit', function(e) {
e.preventDefault(); // 阻止默认提交
if (validateForm()) {
// 验证通过，可提交数据
alert('提交成功！');
form.reset(); // 清空表单
}
});
3. 实现验证逻辑
编写 validateForm() 函数，对各个字段进行检查：
立即学习“Java免费学习笔记（深入）”；
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
function validateForm() {
const username = form.username.value.trim();
const email = form.email.value.trim();
const password = form.password.value;
let isValid = true;
// 用户名不能为空
if (username === '') {
showError(form.username, '用户名不能为空');
isValid = false;
}
// 邮箱格式正则验证
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
showError(form.email, '请输入有效的邮箱地址');
isValid = false;
}
// 密码长度至少6位
if (password.length < 6) {
showError(form.password, '密码至少6位');
isValid = false;
}
return isValid;
}
4. 显示错误信息
添加错误提示功能，提升用户交互体验：
function showError(input, message) {
// 移除之前的错误提示
const formGroup = input.parentElement;
const errorMsg = formGroup.querySelector('.error-message');
if (errorMsg) {
errorMsg.remove();
}
// 创建并插入错误提示
const div = document.createElement('div');
div.className = 'error-message';
div.style.color = 'red';
div.style.fontSize = '12px';
div.textContent = message;
formGroup.appendChild(div);
// 聚焦到出错的输入框
input.focus();
}
可以在每个 input 外层包裹 div，便于定位错误信息位置。也可以使用 class 控制样式和状态。
5. 实时验证（可选）
为提升体验，可在用户输入时实时校验：
form.password.addEventListener('blur', function() {
if (this.value.length > 0 && this.value.length < 6) {
showError(this, '密码至少6位');
}
});
使用 blur 事件在用户离开输入框时触发验证，避免频繁提示。
基本上就这些。通过事件监听、条件判断和 DOM 操作，JavaScript 能高效完成表单验证。关键是合理组织逻辑，给出清晰反馈，保证用户知道如何修正错误。不复杂但容易忽略细节。
