通过 HTML 原生 required 属性可强制用户填写所有必填项，表单仅在验证通过后才提交并重定向；配合 pattern 等属性可增强校验精度，但服务端验证仍必不可少。
通过 html 原生 `required` 属性可强制用户填写所有必填项，表单仅在验证通过后才提交并重定向；配合 `pattern` 等属性可增强校验精度，但服务端验证仍必不可少。
在构建登录或注册类表单时，常需确保用户完整填写关键字段（如用户名、手机号、邮箱等）后才允许跳转至下一页面。HTML 提供了简洁高效的原生解决方案——required 属性。它无需 JavaScript 即可触发浏览器内置的表单验证机制：当用户点击提交按钮时，若任一标记为 required 的字段为空，浏览器将自动聚焦该字段并显示提示（如“请填写此字段”），且阻止表单提交与后续重定向。
以下是一个优化后的示例代码，修正了原始问题中重复使用相同 name="username" 的逻辑错误，并为不同字段赋予语义化名称：
✅ 关键要点说明：
-
<input required>是声明式验证的核心，适用于text、email、tel、number等多数输入类型； -
pattern属性支持正则表达式校验（如上例限制纯数字手机号），title提供自定义提示文本； -
<label for="id"></label>与id关联提升可访问性，避免仅靠视觉布局； -
切勿依赖前端验证保障安全：
required和pattern可被绕过（如禁用 JS 或直接发送请求），因此home.php必须进行服务端空值与格式校验（例如检查$_POST['email_or_phone']是否非空且符合格式）。
总结而言，required 是实现“仅当所有输入已填写才重定向”的轻量级、标准化方案。它兼顾开发效率与用户体验，是现代 HTML 表单验证的基石，但始终应与服务端防护协同使用，形成完整验证闭环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
