程式码片段
由于这个答案引起了广泛关注，因此我想到了一个不错的可配置代码段：
(function (exports) { function valOrFunction(val, ctx, args) { if (typeof val == "function") { return val.apply(ctx, args); } else { return val; } } function InvalidInputHelper(input, options) { input.setCustomValidity(valOrFunction(options.defaultText, window, [input])); function changeOrInput() { if (input.value == "") { input.setCustomValidity(valOrFunction(options.emptyText, window, [input])); } else { input.setCustomValidity(""); } } function invalid() { if (input.value == "") { input.setCustomValidity(valOrFunction(options.emptyText, window, [input])); } else { input.setCustomValidity(valOrFunction(options.invalidText, window, [input])); } } input.addEventListener("change", changeOrInput); input.addEventListener("input", changeOrInput); input.addEventListener("invalid", invalid); } exports.InvalidInputHelper = InvalidInputHelper;})(window);用法
<input id="email" type="email" required="required" />InvalidInputHelper(document.getElementById("email"), { defaultText: "Please enter an email address!", emptyText: "Please enter an email address!", invalidText: function (input) { return 'The email address "' + input.value + '" is invalid!'; }});更多细节
defaultText
最初显示emptyText
输入为空（已清除）时显示invalidText
当输入被浏览器标记为无效时（例如，当它不是有效的电子邮件地址时）显示
您可以为这三个属性中的每一个分配一个字符串或一个函数。
如果分配一个函数，则该函数可以接受对输入元素（DOM节点）的引用，并且 必须 返回一个字符串，该字符串随后将显示为错误消息。
兼容性
经过测试：
- Chrome Canar47.0.2
- IE 11
- Microsoft Edge（使用截至2015年8月28日的最新版本）
- Firefox 40.0.3
- Opera31.0
