各种 HTML5 验证属性的自定义错误消息

Question

当输入控件的验证失败时，有没有办法提供自定义消息（错误消息）？

例如：

<input type="number" value="" min="1" max="5">

输入值 10，然后提交它显示的表单 "请选择一个不超过 5 的值"

这可以使用 javascript 来完成，但我对没有第三方库的 HTML5 方式很感兴趣。

我无法在 HTML5 文档中找到与错误消息相关的属性。

Answer 1

您可以检查它们是否与特定模式匹配，如果匹配，则使提交按钮可见。

欲了解更多信息，请参阅：http://www.the-art-of-web.com/html/html5-form-validation/

示例：

input:required:invalid,
input:focus:invalid {
  border: 1px solid red;
}
input:required:valid {
  border: 1px solid green;
}
input[type="submit"] {
  display: none;
}
input:required:valid ~ input[type="submit"] {
  display: block;
}

<b>Website:</b>
<input type="url" name="website" required pattern="https?://.+">
<input type="submit"><br/>
<i>Submit is only visible when you fill in a website starting with: http(s)://</i>