
正确与错误使用 required 属性
为了更好地理解 required 属性的行为,我们来看两个示例:一个是在
示例:在 form 内部使用 required (正确用法)
当 元素位于
立即学习“前端免费学习笔记(深入)”;
行为解释: 在此示例中,如果用户尝试点击“提交”按钮而未填写“名”或“邮箱”字段,浏览器将阻止表单提交,并显示相应的错误提示,要求用户填写这些必填字段。这是 required 属性的预期行为。
示例:脱离 form 使用 required (错误用法)
当 元素不被任何
行为解释: 尽管 带有 required 属性,但由于它不属于任何
无表单场景下的验证方案:JavaScript
如果你的 元素确实需要验证,但又不希望将其放入
JavaScript 提供了 ValidityState API 和 checkValidity() 方法,可以手动检查表单元素的有效性。
代码解释: 在这个 JavaScript 示例中,我们监听了一个按钮的点击事件。当按钮被点击时,usernameInput.checkValidity() 方法会被调用。如果输入字段无效(例如,为空或长度不足),它会返回 false。我们可以通过 usernameInput.validity 对象来获取具体的验证状态(如 valueMissing 表示值缺失,tooShort 表示过短),然后手动显示自定义的错误信息。
使用 required 属性的注意事项
- 客户端验证是第一道防线,而非唯一防线: required 属性提供的客户端验证能够即时反馈用户,提升用户体验,减少服务器压力。但它绝不能替代服务器端验证。恶意用户可以通过开发者工具禁用 JavaScript 或直接修改 HTML,绕过客户端验证。所有提交到服务器的数据都必须在服务器端进行严格验证。
- 用户体验: 默认的浏览器验证提示可能不符合所有设计风格。可以通过 CSS (:invalid, :valid) 或 JavaScript API (setCustomValidity()) 来定制验证提示的样式和内容,以提供更友好的用户体验。
- 无障碍性: 确保在使用 required 属性时,结合 ARIA 属性(如 aria-required="true")来增强表单的无障碍性,以便辅助技术能够正确识别必填字段。
总结
required 属性是 HTML5 表单验证的重要组成部分,但其有效性严格依赖于其所在的











