输入字段有一个新的 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('');
如果您不清除该消息，表单元素将被视为无效并且表单将不会提交。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
