如何在JS中触发标记为required的input标签验证（无需form标签）

嘿，我懂你要的效果——让没放在form标签里的必填input，在失焦时自动弹出浏览器自带的验证提示气泡对吧？你之前用this.checkValidity()没生效，是因为这个方法只负责检查输入是否有效，返回true/false，但不会主动触发浏览器的提示弹窗。

要实现和form包裹时一样的原生提示效果，你需要用reportValidity()方法，它会在检查有效性的同时，自动弹出浏览器默认的验证气泡。

直接可用的代码示例 #

<input type="text" onblur="this.reportValidity();" required>

补充说明 #

• reportValidity()本身已经包含了有效性检查，所以不需要额外调用checkValidity()，直接用它就够了
• 如果你想做更自定义的逻辑（比如先做其他判断再决定是否提示），也可以结合两个方法：

  <input type="text" onblur="if (!this.checkValidity()) { this.reportValidity(); /* 这里可以加其他处理逻辑 */ }" required>
  

• 主流浏览器（Chrome、Firefox、Edge、Safari）都支持这个方法，兼容性不用担心

内容的提问来源于stack exchange，提问作者Radex