javascript - HTML5 气泡消息

Question

输入字段required 有一个新的 HTML5 属性，它会在提交表单且该字段为空时弹出气泡消息。有没有办法用不同的文本弹出相同的气泡？我想将它用于不同的验证(不仅仅是它是否为空)。

这是 Chrome 中此气泡(弹出窗口)的屏幕截图:

Answer 1

HTML5 提供了一个名为 setCustomValidity 的方法来实现这一点。此方法是一个低级 API，用于添加新的验证约束和添加新的/更改错误消息。您必须调用您的脚本，该脚本删除/添加验证消息 - 使用 setCustomValidity -(在“DOMready”和)输入/更改时。

我写了一个polyfill脚本，它不仅在所有浏览器中实现了那些HTML5表单方法，而且还添加了一个"customValidity"-helper。 ，这使得使用自定义消息添加自定义验证约束变得更加容易。

注意:您无需实现 webshims 库即可使用此脚本。它也可以在没有 webshims 库的情况下工作。 (但如果你使用 webshims 库，你将在包括 IE6 在内的所有浏览器中获得约束验证)。如果您不想拥有此跨浏览器，只需使用 validity-helper script .文档是 here .

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

myFormElement.setCustomValidity('');

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