本文介绍如何使用 HTML 原生 required 属性实现表单提交前的客户端必填校验，仅在所有指定输入框非空时才允许重定向到目标页面，同时强调服务端验证的必要性。
本文介绍如何使用 html 原生 `required` 属性实现表单提交前的客户端必填校验，仅在所有指定输入框非空时才允许重定向到目标页面，同时强调服务端验证的必要性。
要实现“仅当所有输入字段均已填写时才跳转至目标页面”，最简洁、标准且无需 JavaScript 的方案是利用 HTML5 内置的表单验证机制——为关键 <input> 元素添加 required 属性。
该属性会触发浏览器原生验证逻辑：当用户点击提交按钮时，若任一标记为 required 的字段为空，浏览器将自动聚焦该字段、显示提示（如“请填写此字段”），并阻止表单提交与页面跳转；只有全部必填项通过验证后，才会按 <form></form> 的 action 和 method 发起请求（例如跳转至 home.php）。
以下是修正后的完整示例：
⚠️ 注意事项：
-
字段命名需唯一：原代码中两个
<input>均使用name="username"，会导致后一个覆盖前一个值。此处已将第二个字段更正为name="phone"，确保数据准确提交。 -
增强校验可选
pattern：如需格式限制（例如邮箱或手机号），可结合pattern属性（如pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"）并配合title提供友好提示。 -
客户端验证 ≠ 安全保障：
required仅提供用户体验优化，无法防止绕过（如禁用 JS 或直接发送请求）。务必在home.php等后端脚本中再次校验$_POST['username']和$_POST['phone']是否存在、非空且符合业务规则。 -
无障碍支持：
required属性会被屏幕阅读器识别，有助于提升可访问性；建议同时为<label></label>正确绑定for属性（如<label for="username">Email...</label>+<input id="username" name="username" required>）。
总结：required 是实现“仅填满才跳转”的轻量级、标准化解决方案。它开箱即用、兼容主流浏览器，但必须与服务端双重校验协同使用，才能兼顾用户体验与系统安全。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
