设置自定义HTML5所需的字段验证消息

G5WSumit Bijvani提出了一个问题:Set custom HTML5 required field validation message,或许与您遇到的问题类似。

回答者CommunityComFreek给出了该问题的处理方式:

Code snippet

Since this answer got very much attention, here is a nice configurable snippet I came up with:

/**
  * @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);

Usage

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!';
  }
});

More details

  • defaultTextis displayed initially
  • emptyTextis displayed when the input is empty (was cleared)
  • invalidTextis displayed when the input is marked as invalid by the browser (for example when it's not a valid email address)

You can either assign a string or a function to each of the three properties. If you assign a function, it can accept a reference to the input element (DOM node) and it mustreturn a string which is then displayed as the error message.

Compatibility

Tested in:

  • Chrome Canary 47.0.2
  • IE 11
  • Microsoft Edge (using the up-to-date version as of 28/08/2015)
  • Firefox 40.0.3
  • Opera 31.0

Old answer

You can see the old revision here: https://stackoverflow.com/revisions/16069817/6

希望本文对你有帮助,欢迎支持JavaScript中文网

原文链接:stackoverflow.com

上一篇:如何从一个URL中提取一个JSON字符串?
下一篇:延伸的错误在语法与巴贝尔JavaScript ES6

相关推荐

  • 验证选择框

    ponjoh(https://stackoverflow.com/users/153284/ponjoh)提出了一个问题:Validate select box,或许与您遇到的问题类似。

    2 年前
  • 验证谷歌地图中的点是陆地还是水

    验证谷歌地图中的点是陆地还是水...

    2 年前
  • 验证码2与阿贾克斯

    Gofilord(https://stackoverflow.com/users/3448251/gofilord)提出了一个问题:ReCaptcha 2.0 With AJAX,或许与您遇到的问题类...

    2 年前
  • 验证库对Node.js [关闭]

    George Baileyajsie(https://stackoverflow.com/users/463304/georgebailey)提出了一个问题:Validation library fo...

    2 年前
  • 验证字符串是否为正整数。

    Tim S. Van HarenMick Byrne(https://stackoverflow.com/users/107009/timsvanharen)提出了一个问题:Validate that...

    2 年前
  • 验证大陆身份证号

    本篇只是记录,为实际业务所碰到的问题。 实现了一个前端的大陆身份证验证(网上cv的)。 问:为毛没验证15位身份证? 答:因为1999年起开始执行18位标准,现在已经过去了20年。

    10 个月前
  • 验证外部脚本是否已加载

    AGoodDisplayName(https://stackoverflow.com/users/197701/agooddisplayname)提出了一个问题:Verify External Scr...

    2 年前
  • 验证JavaScript中的十进制数字

    Michael Haren(https://stackoverflow.com/users/29)提出了一个问题:Validate decimal numbers in JavaScript IsN...

    2 年前
  • 项目实战-在Vant的基础上实添加验证框架

    Vant(https://youzan.github.io/vant/) 一套基于Vue的移动端UI框架,有赞出品。 因为UI设计的够漂亮,源码结构也比较清晰,插件定位也比较明确,重要是实战过程中的...

    2 年前
  • 面板拖拽之vue自定义指令

    前言 在指令里获取的this并不是vue对象,vnode.context才是vue对象,一般来说,指令最好不要访问vue上的data,以追求解耦,但是可以通过指令传进来的值去访问method或re...

    1 年前

官方社区

扫码加入 JavaScript 社区