本文介绍如何利用 HTML 原生 required 属性实现“仅当所有必填字段填写完整时才提交并跳转”，同时强调客户端验证的局限性及服务端校验的必要性。
本文介绍如何利用 html 原生 `required` 属性实现“仅当所有必填字段填写完整时才提交并跳转”，同时强调客户端验证的局限性及服务端校验的必要性。
在构建登录、注册等表单时，一个常见需求是：用户必须填写全部关键字段后，才能触发页面跳转（如提交至 home.php）。许多初学者误以为需依赖 JavaScript 手动监听输入或按钮点击事件，但实际上，现代 HTML 提供了简洁、语义化且兼容性良好的原生解决方案——required 属性。
只需为每个必填 <input> 元素添加 required 属性，浏览器便会自动执行基础验证：当用户点击提交按钮时，若任一标有 required 的字段为空，表单将阻止提交，并在对应输入框旁显示默认提示（如“请填写此字段”），焦点也会自动定位到首个未填写项。
以下是优化后的表单示例（已修正原始代码中重复的 name="username" 问题，确保语义准确）：
✅ 关键改进说明：
- 使用
type="tel"替代type="text"以启用设备专属键盘（如数字键盘），提升移动端体验； - 为
<input>添加placeholder和for/id关联<label></label>，增强可访问性； - 修正
name属性值，避免两个字段共用username导致后端无法区分数据。
⚠️ 重要注意事项：
-
required仅提供客户端基础验证，无法防止绕过（如禁用 JS、直接发送 POST 请求）。 -
服务端必须二次校验：PHP 中应检查
$_POST['email_or_phone']和$_POST['phone']是否非空且符合格式（如正则匹配邮箱或手机号），否则存在安全与数据完整性风险。 - 如需更精细控制（如自定义错误消息、异步验证），可在
required基础上结合 JavaScript 的checkValidity()和setCustomValidity()方法，但绝不应替代服务端验证。
总结：required 是实现“填满再跳转”的最轻量、最标准方案。它开箱即用、无需额外脚本，是每个前端开发者应掌握的基础能力——但请永远记住：客户端验证是用户体验优化，服务端验证才是安全底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
