HTML5 气泡消息

输入字段有一个新的 HTML5 属性required提交表单且字段为空时会弹出气泡消息。有什么办法可以弹出带有不同文本的相同气泡吗？我想将它用于不同的验证（不仅仅是它是否为空）。

以下是 Chrome 中此气泡（弹出窗口）的屏幕截图：

HTML5提供了一个方法叫做设置自定义有效性 http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-cva-setcustomvalidity正是为了实现这一点。此方法是一个低级 API，用于添加新的验证约束并添加新的/更改的错误消息。您必须调用脚本，该脚本会在输入/更改时使用 setCustomValidity（在“DOMready”和）上删除/添加验证消息。

我写了一个polyfill脚本，它不仅在所有浏览器中实现了那些HTML5表单方法，而且还添加了一个“自定义有效性”-帮助程序 http://afarkas.github.com/webshim/demos/demos/webforms/4-webforms-custom-validity.html，这使得使用自定义消息添加自定义验证约束变得更加容易。

注意：您不需要实现 webshims lib 即可使用此脚本。它也可以在没有 webshims lib 的情况下工作。 （但是如果您使用 webshims lib，您将在包括 IE6 在内的所有浏览器中获得约束验证）。如果您不想使用此跨浏览器，只需使用有效性辅助脚本 https://github.com/aFarkas/webshim/blob/master/demos/js-webshim/minified/extras/custom-validity.js。文档是here http://afarkas.github.com/webshim/demos/demos/webforms/4-webforms-custom-validity.html.

请注意，如果您确实通过设置自定义消息来更改消息，则必须包含一种清除消息的方法，例如

myFormElement.setCustomValidity('');

如果您不清除该消息，表单元素将被视为无效并且表单将不会提交。