如何在oninvalid弹窗消息中添加换行符展示多行验证要求

嘿，我懂你想把验证错误里的多条要求分行显示的需求！你之前尝试用<br>标签来换行，但浏览器的默认验证提示框并不支持HTML标签，所以那些<br>会直接被当成文本显示出来，不会起到换行作用。

正确的解决方案：用换行符\n #

浏览器的默认验证弹窗支持原生的换行符\n，你只需要把原来的<br>替换成\n就能实现多行显示的效果啦。

修改后的完整代码示例 #

<form action='' method='post'>
  <input 
    type="text" 
    id="username" 
    required 
    placeholder="Enter Name" 
    autocomplete="off" 
    oninvalid="this.setCustomValidity('fix format #1\nfix format #2\nfix format #3')" 
    oninput="setCustomValidity('')" 
  />
  <input type="submit" value="submit">
</form>

注意事项 #

• 一定要保留oninput="setCustomValidity('')"这行代码，它的作用是当用户开始输入内容时，清除之前设置的自定义错误提示。如果没有这行，一旦触发过一次错误提示，后续即使输入正确内容，弹窗还是会一直显示错误信息。
• 如果你需要更复杂的样式（比如加粗、颜色），那默认的验证弹窗就满足不了了，这时候你可能需要自己实现自定义的验证弹窗组件，完全控制样式和布局。

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