各种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/

示例：

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;