代码片段

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

/**
  * @author ComFreek <https://stackoverflow.com/users/603003/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

<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 节点）的引用，并且必须返回一个字符串，然后将其显示为错误消息。

兼容性

测试于：

• 铬金丝雀 47.0.2
• 浏览器 11
• Microsoft Edge（使用截至 28/08/2015 的最新版本）
• 火狐 40.0.3
• 歌剧 31.0

旧答案

您可以在此处查看旧版本：https : //stackoverflow.com/revisions/16069817/6

您可以使用 oninvalid 属性简单地实现这一点，请查看此演示代码

<form>
<input type="email" pattern="[^@]*@[^@]" required oninvalid="this.setCustomValidity('Put  here custom message')"/>
<input type="submit"/>
</form>

Codepen 演示：https ://codepen.io/akshaykhale1992/pen/yLNvOqP

HTML：

<form id="myform">
    <input id="email" oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);"  type="email" required="required" />
    <input type="submit" />
</form>

Java脚本：

function InvalidMsg(textbox) {
    if (textbox.value == '') {
        textbox.setCustomValidity('Required email address');
    }
    else if (textbox.validity.typeMismatch){{
        textbox.setCustomValidity('please enter a valid email address');
    }
    else {
       textbox.setCustomValidity('');
    }
    return true;
}

演示：

http://jsfiddle.net/patelriki13/Sqq8e/

试试这个：

$(function() {
    var elements = document.getElementsByName("topicName");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("Please enter Room Topic Title");
        };
    }
})

我在 Chrome 和 FF 中对此进行了测试，它在两种浏览器中都有效。

伙计，我从未在 HTML 5 中这样做过，但我会尝试。看看这个小提琴。

我在输入标签上使用了一些 jQuery、HTML5 本机事件和属性以及自定义属性（如果您尝试验证代码，这可能会导致问题）。我没有在所有浏览器中进行测试，但我认为它可能有效。

这是使用 jQuery 的字段验证 JavaScript 代码：

$(document).ready(function()
{
    $('input[required], input[required="required"]').each(function(i, e)
    {
        e.oninput = function(el)
        {
            el.target.setCustomValidity("");

            if (el.target.type == "email")
            {
                if (el.target.validity.patternMismatch)
                {
                    el.target.setCustomValidity("E-mail format invalid.");

                    if (el.target.validity.typeMismatch)
                    {
                         el.target.setCustomValidity("An e-mail address must be given.");
                    }
                }
            }
        };

        e.oninvalid = function(el)
        {
            el.target.setCustomValidity(!el.target.validity.valid ? e.attributes.requiredmessage.value : "");
        };
    });
});

好的。这是简单的表单html：

<form method="post" action="" id="validation">
    <input type="text" id="name" name="name" required="required" requiredmessage="Name is required." />
    <input type="email" id="email" name="email" required="required" requiredmessage="A valid E-mail address is required." pattern="^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9]+$" />

    <input type="submit" value="Send it!" />
</form>

属性requiredmessage就是我讲的自定义属性。您可以为每个必填字段设置消息，因为 jQuery 会在显示错误消息时从中获取。您不必在 JavaScript 上正确设置每个字段，jQuery 会为您完成。那个正则表达式似乎很好（至少它阻止了你testing@.com！哈哈）

正如你在小提琴上看到的，我对提交表单事件进行了额外的验证（这也在 document.ready 上）：

$("#validation").on("submit", function(e)
{
    for (var i = 0; i < e.target.length; i++)
    {
        if (!e.target[i].validity.valid)
        {
            window.alert(e.target.attributes.requiredmessage.value);
            e.target.focus();
            return false;
        }
    }
});

我希望这对您有用或对您有所帮助。