如何设置表单必填项 REQUIRED 属性

HTML原生的required属性虽能零代码实现基础必填校验并触发浏览器默认提示，但其生效条件极为严苛：仅作用于input、select、textarea等原生表单控件，对自定义组件、hidden/button类型完全无效；一旦submit事件被preventDefault拦截或使用form.submit()进行JS提交，校验便会静默失效，必须手动调用checkValidity()或reportValidity()补全逻辑；同时需注意aria-required仅服务于无障碍语义，无法替代required的功能性校验——用错边界不仅导致“空提交”“无提示”等诡异现象，更可能让表单在关键流程中悄然卡死，掌握这些隐藏规则才是写出健壮表单验证的第一步。

HTML 原生 required 属性就能实现基础必填验证，无需 JS 就能触发浏览器默认提示，但它的行为和兼容性有明确边界，用错反而导致表单卡死或验证失效。

为什么 required 有时不生效？

常见现象：点提交没反应、控制台无报错、输入框明明空着却直接提交成功。

• required 只对 <input>、<select>、<textarea> 生效，对自定义组件（如 ）完全无效
• 若表单用 event.preventDefault() 拦截了 submit 事件，且没手动调用 checkValidity()，浏览器原生校验就被跳过
• type="hidden"、type="button" 等类型不支持 required，写了也忽略
• 某些旧版 iOS Safari 对 required 在 <select> 上的支持不一致，建议加默认空选项：请选择

required 和 aria-required 的区别

required 是功能属性，触发校验逻辑；aria-required="true" 仅是语义标记，供读屏器识别，不影响校验行为。

• 两者可以共存，但不能互相替代：只写 aria-required，表单照样能空提交
• 无障碍场景下建议同时设置：<input required aria-required="true">
• 如果用 JS 动态控制必填状态，优先操作 element.required = true/false，而非增删 aria-required

如何配合 JS 获取校验结果

原生校验后，需要知道是否通过才能决定后续逻辑（比如发请求或聚焦错误项）。

• 监听 submit 事件时，直接检查 form.checkValidity() 返回布尔值
• 想获取具体哪个字段失败？遍历 form.elements，查每个元素的 validity.valueMissing 属性（true 表示因 required 缺失）
• 手动触发校验（比如失去焦点时）：调用 input.reportValidity()，它会显示浏览器默认气泡提示并返回布尔值
• 注意：reportValidity() 在 Firefox 中对 <select> 的空值判断比 Chrome 更严格，建议统一设 value="" 为空选项

真正容易被忽略的是：当用 JS 提交表单（如 form.submit()）时，required 校验根本不会触发——这是规范行为，不是 bug。必须显式调用 checkValidity() 或 reportValidity() 来补上这一步。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。