在网页交互场景中，表单提交前的必填字段验证是避免无效数据提交的基础操作，验证通过后跳转到结果页也是常见的业务流程。实现这个需求的核心是先拦截表单的默认提交行为，再对必填字段逐一校验，全部通过后再执行跳转逻辑。
核心实现思路
整个流程可以分为三个步骤：
- 监听表单的提交事件，阻止浏览器默认的提交跳转行为
- 遍历所有标记为必填的表单字段，检查其值是否为空或者不符合要求
- 如果所有必填字段都通过验证，使用
window.location.href跳转到结果页；如果存在未通过的字段，给出对应的错误提示
基础实现示例
首先我们创建一个包含必填字段的简单表单，然后通过JavaScript实现验证逻辑：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单验证示例</title>
<style>
.error-tip {
color: #ff4d4f;
font-size: 12px;
margin-top: 4px;
}
.form-item {
margin-bottom: 16px;
}
</style>
</head>
<body>
<form id="myForm">
<div class="form-item">
<label>用户名（必填）：</label>
<input type="text" name="username" class="required-field">
<div class="error-tip" id="usernameError"></div>
</div>
<div class="form-item">
<label>邮箱（必填）：</label>
<input type="email" name="email" class="required-field">
<div class="error-tip" id="emailError"></div>
</div>
<div class="form-item">
<label>年龄（选填）：</label>
<input type="number" name="age">
</div>
<button type="submit">提交表单</button>
</form>
<script>
// 获取表单元素
const form = document.getElementById('myForm');
// 监听表单提交事件
form.addEventListener('submit', function(e) {
// 阻止默认提交行为
e.preventDefault();
// 清空之前的错误提示
document.getElementById('usernameError').innerText = '';
document.getElementById('emailError').innerText = '';
// 获取所有必填字段
const requiredFields = document.querySelectorAll('.required-field');
let isValid = true;
// 遍历必填字段校验
requiredFields.forEach(field => {
const value = field.value.trim();
const errorId = field.name + 'Error';
const errorElement = document.getElementById(errorId);
if (!value) {
isValid = false;
errorElement.innerText = '该字段为必填项，请填写内容';
}
});
// 验证通过则跳转结果页
if (isValid) {
window.location.href = 'https://ipipp.com/result.html';
}
});
</script>
</body>
</html>
代码逻辑说明
上面的示例中有几个需要注意的点：
- 使用
e.preventDefault()阻止表单默认提交，避免页面直接刷新或者跳转，保证我们可以先执行验证逻辑 - 给必填字段添加统一的
required-field类名，方便批量获取元素，后续新增必填字段只需要添加这个类名即可 - 错误提示元素和字段的name属性关联，方便精准定位显示错误信息
- 使用
trim()方法处理输入值，避免用户只输入空格的情况被判定为有效输入
进阶优化技巧
1. 自定义验证规则
除了非空校验，还可以给必填字段添加自定义规则，比如邮箱格式校验：
// 邮箱格式校验函数
function checkEmail(email) {
const reg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/;
return reg.test(email);
}
// 在遍历校验的循环中补充邮箱校验逻辑
if (field.name === 'email') {
if (!checkEmail(value)) {
isValid = false;
errorElement.innerText = '请输入正确的邮箱格式';
}
}
2. 统一错误提示管理
如果表单字段较多，可以把错误提示信息统一管理，避免硬编码：
const errorMsgMap = {
username: '用户名不能为空',
email: '邮箱不能为空'
};
// 校验时获取对应提示
if (!value) {
isValid = false;
errorElement.innerText = errorMsgMap[field.name] || '该字段为必填项';
}
3. 跳转时携带参数
如果需要在结果页展示表单提交的内容，可以在跳转时把参数拼接到URL中：
if (isValid) {
const params = new URLSearchParams();
const formData = new FormData(form);
for (let [key, value] of formData.entries()) {
params.append(key, value);
}
window.location.href = `https://ipipp.com/result.html?${params.toString()}`;
}
常见问题说明
很多开发者在实现时会遇到验证不生效的问题，通常是因为没有正确阻止默认提交行为，或者获取字段值时没有处理空格。另外如果表单是动态生成的，需要使用事件委托来监听提交事件，避免监听失效。
如果需要在本地测试跳转逻辑，可以把结果页地址换成127.0.0.1或者192.168.0.1开头的本地地址，不需要做替换处理，直接正常使用即可。
JavaScript表单验证必填字段页面跳转修改时间：2026-07-16 11:00:40