html - HTML5 自定义验证演示

Question

HTML5 提供自动弹出验证消息。

如何删除此弹出窗口并在相关字段旁边显示消息？

Answer 1

弹出验证消息的实际格式是特定于浏览器的，因此您不会找到一种跨浏览器的纯 HTML 方式来更改内置验证消息的显示方式。

如果您愿意使用 jQuery，请考虑使用jQuery Validation插件之类的工具，仅举一个例子。

如果您需要纯 HTML/CSS，那么您的选择非常有限。一些浏览器（基于 Webkit 的浏览器）将允许使用特定于浏览器的 CSS 自定义弹出框，如本文所述：如何设置 HTML5 表单验证消息的样式？

虽然它不控制验证弹出窗口，但可以使用:valid和:invalidCSS 伪类对输入本身进行样式设置。例如：

input:valid {
    background-color: #FFFFFF;
}
input:invalid {
    background-color: red;
}