更改 html 输入验证消息的持续时间

【问题标题】：Change the duration of html input validation messages更改 html 输入验证消息的持续时间
【发布时间】：2018-08-12 03:21:33
【问题描述】：

<input type="text" name="username" maxlength="20" pattern="^[a-zA-Z0-9]+[_\.\-]?[a-zA-Z0-9]+" title="Please enter only alphabets or numbers or one of the special characters period(.), underscore(_), hyphen(-) and make sure it starts and ends with an alphabet or a number" required>

此验证消息显示时间很短，因为消息很长，它应该保持很长时间，但它会在几秒钟后消失。

如何管理时长？

【问题讨论】：

标签： html validation input

【解决方案1】：

您必须有导致此行为的代码，因为默认情况下 HTML 5 表单验证仅将 :valid 或 :invalid CSS 伪类添加到输入字段。

您可以添加自定义 CSS 样式以向用户反映此状态，如下所示：

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

您可以在此处阅读有关客户端输入验证的更多信息：
https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation

【讨论】：

我希望消息“请匹配请求的格式”保留更长的时间，现在它会保留很短的时间。