这是在 HTML5 中处理自定义错误消息的代码：

<input type="text" id="username" required placeholder="Enter Name"
  oninvalid="this.setCustomValidity('Enter User Name Here')"
  oninput="this.setCustomValidity('')"/>

这部分很重要，因为它隐藏了用户输入新数据时的错误信息：

oninput="this.setCustomValidity('')"

使用setCustomValidity：

document.addEventListener("DOMContentLoaded", function() {
    var elements = document.getElementsByTagName("INPUT");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("This field cannot be left blank");
            }
        };
        elements[i].oninput = function(e) {
            e.target.setCustomValidity("");
        };
    }
})

我按照@itpastorn在评论中的建议从 Mootools更改为 vanilla JavaScript，但如果需要，您应该能够计算出等效的 Mootools。

编辑

我在这里更新了代码，因为它的setCustomValidity工作原理与我最初回答时的理解略有不同。如果setCustomValidity设置为空字符串以外的任何内容，则会导致该字段被视为无效；因此在测试有效性之前必须清除它，您不能设置它并忘记它。

进一步编辑

正如下面@thomasvdb 的评论中所指出的，您需要在某些事件之外清除自定义有效性，invalid否则可能需要额外通过oninvalid处理程序来清除它。

借助HTML5事件控制自定义消息非常简单oninvalid

这是代码：

<input id="UserID"  type="text" required="required"
       oninvalid="this.setCustomValidity('Witinnovation')"
       onvalid="this.setCustomValidity('')">

这是最重要的：

onvalid="this.setCustomValidity('')"

注意：这在 Chrome 中不再有效，未在其他浏览器中测试。请参阅下面的编辑。这个答案留在这里以供历史参考。

如果您觉得验证字符串真的不应该由代码设置，您可以将输入元素的标题属性设置为“此字段不能留空”。（适用于 Chrome 10）

title="This field should not be left blank."

见http://jsfiddle.net/kaleb/nfgfP/8/

在 Firefox 中，您可以添加此属性：

x-moz-errormessage="This field should not be left blank."

编辑

自从我最初写这个答案以来，这似乎已经改变了。现在添加标题不会更改有效性消息，它只是向消息添加附录。上面的小提琴仍然适用。

编辑 2

从 Chrome 51 开始，Chrome 现在对 title 属性不做任何处理。我不确定在哪个版本中发生了变化。

借助HTML5 oninvalid事件控制自定义消息非常简单

这是代码：

User ID 
<input id="UserID"  type="text" required 
       oninvalid="this.setCustomValidity('User ID is a must')">