键入时验证电子邮件答案

【问题标题】：Validate email as you type键入时验证电子邮件
【发布时间】：2013-01-11 09:43:36
【问题描述】：

我想在键入时验证输入，因此我使用 onkeyup 事件来执行此操作，但是如果我验证电子邮件正则表达式“name@domain.com”，一旦用户开始键入它就会引发错误 - 第一个字符不会匹配正则表达式...

所以我写了这个：

var addValidation = function (patterns) {
        var index = patterns.length; //I know I can avoid this
        while (index--) {
            patterns[index] = new RegExp(patterns[index]);
        }

        index = 0;
        var current = patterns[index],
        matchExact = function (patt, str) {
            var match = str.match(patt);
            return match !== null && str === match[0];
        };

        return function () {
            var str = this.value;
            if (!matchExact(current, str) ) {
                var tmp = patterns[index + 1] ? 
                    new RegExp(current.source + patterns[index + 1].source) :
                    false;
                if (tmp && matchExact(tmp, str)) {
                    current = tmp;
                    index++;
                }
                else {
                    alert("Wrong");
                }
            }
        }
    };
    document.getElementById("x").onkeyup = addValidation(["[a-zA-Z0-9\\.]+", "@{1}", "[a-zA-Z0-9]+", "\\.{1}", "[a-zA-Z]{1,3}"]);

它似乎有效，但是......它很难看，如果你后退一步它会提醒你（例如“name@”并按下退格键）。

我知道 Dojo 的验证很棒，但我不想使用 Dojo。有没有更好的方法来实现这一目标？

//编辑：http://livedocs.dojotoolkit.org/dijit/form/ValidationTextBox 这是一个示例，但您可以定义自己的模式（如电子邮件正则表达式），它将完美地验证它。

【问题讨论】：

标签： javascript regex validation

【解决方案1】：

在验证开始前添加间隔：

var t;
document.getElementById("x").onkeyup = function () {
    if (t) {
        clearTimeout(t);
    }
    t = setTimeout(function () {
        //do validation
    }, 1000)
}

【讨论】：

如果有很多字段，这似乎很麻烦。最好使用一些关键操作相关的事件。
不要提及这个代码。我刚刚展示了如何解决此类问题

【解决方案2】：

永远不要尝试使用正则表达式验证电子邮件地址。您要么最终允许无效地址，要么阻止完全有效但只会惹恼访问者的电子邮件地址。还值得记住的是，迄今为止验证电子邮件地址的最佳正则表达式是这样的：

http://www.ex-parrot.com/pdw/Mail-RFC822-Address.html

【讨论】：