我有如下HTML表单: http://jsfiddle.net/nfgfP/
<form id="form" onsubmit="return(login())">
<input name="username" placeholder="Username" required />
<input name="pass" type="password" placeholder="Password" required/>
<br/>Remember me: <input type="checkbox" name="remember" value="true" /><br/>
<input type="submit" name="submit" value="Log In"/>当前，当我在两个字段都为空时按下enter键，会出现一个弹出框，显示“请填写此字段”。我该如何将默认的消息更改为“此字段不能为空”？
密码字段的错误消息只是*****。要重现此操作，请给用户名赋值并点击提交。
<input type="text" id="username" required placeholder="Enter Name"
oninvalid="this.setCustomValidity('Enter User Name Here')"
oninput="this.setCustomValidity('')"/>
这部分很重要，因为它在用户输入新数据时隐藏了错误消息：
oninput="setCustomValidity('')"
this关键字，但为了保持一致性，您可能仍然想要使用它。this.，因为内联事件处理程序是在 with(this) 的作用域下运行的（并不是说您应该这样做）。 - phil294document.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不是空字符串，它将导致该字段被视为无效；因此，在测试有效性之前必须清除它，不能仅仅设置并忘记。
正如@thomasvdb在下面的评论中指出的那样，您需要在invalid之外的某个事件中清除自定义有效性，否则可能会多次通过oninvalid处理程序来清除它。
$("")返回一个对象数组，即使只有一个对象也是如此。$("")[i]可能是您想要的。 - Noah Passalacquaoninvalid属性也是完全没有意义的。 - John使用 HTML5 事件 oninvalid 很容易控制自定义消息。
以下是代码：
<input id="UserID" type="text" required="required"
oninvalid="this.setCustomValidity('Witinnovation')"
onvalid="this.setCustomValidity('')">
这是最重要的：
onvalid="this.setCustomValidity('')"
onchange="this.setCustomValidity('')"，这个 bug 将被解决。请查看下面的答案。 - Salaroninput而不是onvalid。 - Jimothyoninput是更通用的解决方案，即使在Chrome中，onvalid也无法正常工作。 - ThisGuyCantEven注意：这种方法在Chrome中已不再起作用，在其他浏览器中未经过测试。请参见下面的编辑内容。此答案仅供历史参考。
如果您认为验证字符串确实不应该由代码设置，您可以将输入元素的title属性设置为“此字段不能为空”。（适用于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."
自我回答此问题以来，似乎已经发生了改变。现在添加标题不会更改有效性消息，只会在消息中添加附言。上面的样例仍然适用。
从Chrome 51版本开始，Chrome不再使用标题属性。我不确定这个更改是在哪个版本中进行的。
x-moz-errormessage="此字段不应为空。" - robertc使用 HTML5 的 oninvalid 事件非常简单，可以轻松地控制自定义的消息。
以下是代码：
User ID
<input id="UserID" type="text" required
oninvalid="this.setCustomValidity('User ID is a must')">
setCustomValidity，验证消息将无缺陷地工作。<input name="Username" required
oninvalid="this.setCustomValidity('Username cannot be empty.')"
onchange="this.setCustomValidity('')" type="text" />
我使用了onchange而不是oninput，onchange更加通用，无论通过JavaScript还是其他方式改变值时都会触发。
我使用onchange代替oninput，因为onchange更加通用，即使通过JavaScript或其他条件改变值，也会触发事件。
e 可能为空，例如当从 React Select 字段中删除选项时。不要忘记检查它。 - GuiRitteronChange和onInvalid作为inputProps={{ onInvalid: …, onChange: …, }}传递。 - GuiRitteronchange 而不是 oninput 可以使 HTML5 date 类型字段正常工作。 - mlerley试试这一个，它更好且经过测试：
function InvalidMsg(textbox) {
if (textbox.value === '') {
textbox.setCustomValidity('Required email address');
} else if (textbox.validity.typeMismatch){
textbox.setCustomValidity('please enter a valid email address');
} else {
textbox.setCustomValidity('');
}
return true;
}<form id="myform">
<input id="email"
oninvalid="InvalidMsg(this);"
oninput="InvalidMsg(this);"
name="email"
type="email"
required="required" />
<input type="submit" />
</form>Demo:
我发现最简单和干净的方法是使用数据属性来存储自定义错误。测试节点有效性，并使用一些自定义HTML处理错误。 
JavaScript
if(node.validity.patternMismatch)
{
message = node.dataset.patternError;
}
还有一些超级的HTML5
<input type="text" id="city" name="city" data-pattern-error="Please use only letters for your city." pattern="[A-z ']*" required>
<p>Click the 'Submit' button with empty input field and you will see the custom error message. Then put "-" sign in the same input field.</p>
<form method="post" action="#">
<label for="text_number_1">Here you will see browser's error validation message on input:</label><br>
<input id="test_number_1" type="number" min="0" required="true"
oninput="this.setCustomValidity('')"
oninvalid="this.setCustomValidity('This is my custom message.')"/>
<input type="submit"/>
</form>
<form method="post" action="#">
<p></p>
<label for="text_number_1">Here you will see no error messages on input:</label><br>
<input id="test_number_2" type="number" min="0" required="true"
oninput="(function(e){e.setCustomValidity(''); return !e.validity.valid && e.setCustomValidity(' ')})(this)"
oninvalid="this.setCustomValidity('This is my custom message.')"/>
<input type="submit"/>
</form>