本文介绍如何利用 HTML 原生 required 属性实现“仅当所有必填字段填写完整时才提交并跳转”，同时强调客户端验证的局限性及服务端校验的必要性。

本文介绍如何利用 HTML 原生 `required` 属性实现“仅当所有必填字段填写完整时才提交并跳转”，同时强调客户端验证的局限性及服务端校验的必要性。

required 属性即可实现基础拦截

做登录、注册这类表单时，经常会遇到一个很实际的要求：只有当用户把所有关键字段都填写完整之后，页面跳转才应该被触发（比如提交到 home.php）。

不少刚入门的人第一反应是用 Ja vaScript 去手动监听输入状态或按钮点击事件。但其实没那么复杂。

现代 HTML 早就提供了一个更直接、更语义化、兼容性也不错的原生方案：required 属性。

实现方式

做法很直接。给每个必填的 元素加上 required 属性即可。

这样一来，浏览器会自动完成最基础的校验。用户点击提交按钮后，只要有任何带 required 的字段仍然为空，表单就会阻止提交。

同时，浏览器会在对应输入框旁给出默认提示，比如“请填写此字段”，并把焦点自动移到第一个未填写的项目上。

表单示例

以下是优化后的表单示例（已修正原始代码中重复的 name="username" 问题，确保语义准确）：

Email or phone number



Phone

Sign In

关键改进说明

• 使用 type="tel" 替代 type="text" 以启用设备专属键盘（如数字键盘），提升移动端体验；
• 为 添加 placeholder 和 for/id 关联 ，增强可访问性；
• 修正 name 属性值，避免两个字段共用 username 导致后端无法区分数据。

必须注意的问题

required 只能提供客户端基础验证，不能替代服务端校验。

• required 仅提供客户端基础验证，无法防止绕过（如禁用 JS、直接发送 POST 请求）。
• 服务端必须二次校验：PHP 中应检查 $_POST['email_or_phone'] 和 $_POST['phone'] 是否非空且符合格式（如正则匹配邮箱或手机号），否则存在安全与数据完整性风险。
• 如需更精细控制（如自定义错误消息、异步验证），可在 required 基础上结合 Ja vaScript 的 checkValidity() 和 setCustomValidity() 方法，但绝不应替代服务端验证。

总结

required 是实现“填满再跳转”的最轻量、最标准方案。

它开箱即用、无需额外脚本，是每个前端开发者应掌握的基础能力。

但请永远记住：客户端验证是用户体验优化，服务端验证才是安全底线。

《夸克》非常好用的免费AI浏览器

下载APP查看