代码段
由于这个答案得到了很多关注,这是我提出的一个很好的可配置代码片段:
/**
* @author ComFreek
* @link https://stackoverflow.com/a/16069817/603003
* @license MIT 2013-2015 ComFreek
* @license[dual licensed] CC BY-SA 3.0 2013-2015 ComFreek
* You MUST retain this license header!
*/
(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);
用法
→ jsFiddle
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 当浏览器将输入标记为无效时显示(例如,当它不是有效的电子邮件地址时)
您可以为三个属性中的每个属性分配字符串或函数。
如果指定了一个函数,它可以接受对input元素(DOM节点)的引用,并且它必须返回一个字符串,然后将其显示为错误消息。
兼容性
测试中:
Chrome Canary 47.0.2
IE 11
Microsoft Edge(使用截至2015年8月28日的最新版本)
Firefox 40.0.3
Opera 31.0
老答案
您可以在此处查看旧版本:https://stackoverflow.com/revisions/16069817/6