在网页开发中，我们经常需要收集用户输入。为了确保数据的完整性和有效性，通常要求用户在提交表单前填写所有必填字段。如果用户在未完成填写的情况下尝试提交表单，我们希望阻止其跳转到下一个页面，并提示其完成输入。
客户端表单必填项验证的实现
HTML5引入了required属性，极大地简化了客户端表单必填项的验证。当一个表单输入字段（如,
让我们通过一个具体的例子来演示如何使用required属性。
原始表单代码（未验证）：
在上述代码中，如果用户不输入任何内容直接点击“登录”按钮，表单会直接提交到home.php页面，这不符合我们的预期。
使用required属性进行验证：
为了实现必填项验证，我们只需在需要强制用户填写的标签中添加required属性。
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
现在，当用户尝试提交表单时，如果username或phone字段为空，浏览器将阻止表单提交，并显示一个提示信息（例如：“请填写此字段”），直到所有带有required属性的字段都被填写。只有当所有必填字段都填写完毕后，表单才会成功提交，用户才会被重定向到home.php页面。
结合pattern属性进行更精细的验证
除了简单的必填项验证，我们还可以使用pattern属性来定义更具体的输入格式要求。pattern属性接受一个正则表达式作为值，浏览器会根据这个正则表达式来验证用户输入。
例如，如果我们希望“手机号码”字段必须是11位数字，可以这样结合使用required和pattern：
在这个例子中：
- required确保了手机号码字段必须填写。
- pattern="[0-9]{11}"确保了输入必须是11位数字。
- title="请输入11位数字的手机号码"提供了当输入不符合pattern时，浏览器可能显示的提示信息。
注意事项与安全考量
- 用户体验优化： required和pattern属性提供了快速、即时的客户端验证，显著提升了用户体验，减少了无效的表单提交。
- 客户端验证的局限性： 重要的是要理解，客户端验证（无论多么完善）都仅仅是用户体验层面的优化，不能作为数据安全和完整性的唯一保障。恶意用户可以轻易地绕过客户端脚本和HTML属性进行提交。
- 服务器端验证的必要性： 任何从客户端接收到的数据，都必须在服务器端进行严格的验证和清理。这是防止SQL注入、XSS攻击、数据损坏等安全问题的关键防线。例如，即使客户端要求11位数字，服务器端也应再次验证该字段是否为有效的11位数字，并检查其是否符合业务逻辑。
总结
通过在HTML表单输入字段中添加required属性，我们可以轻松实现客户端必填项验证，有效阻止用户在未完成必要信息填写时提交表单并跳转页面。结合pattern属性，可以进一步细化输入格式要求，提供更友好的用户体验。然而，务必牢记客户端验证仅是第一道防线，服务器端验证才是确保数据安全与系统稳定的核心。开发者应始终坚持“永不信任客户端输入”的原则，对所有提交的数据进行严格的服务器端校验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
