html5规定必填字段,设置自定义HTML5必填字段验证消息

代码段

由于这个答案得到了很多关注，这是我提出的一个很好的可配置代码片段：

/**

* @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