HTML5电子邮件输入模式属性

Question

我正在尝试制作一个html5表单，其中包含一个电子邮件输入、一个复选框输入和一个提交输入。我试图在电子邮件输入中使用pattern属性，但是我不知道在这个属性中放置什么。我知道我应该使用一个必须与JavaScript模式生成相匹配的正则表达式，但我不知道如何做到这一点。

我试图让这个属性检查，以确保电子邮件包含一个@和至少一个或多个点，如果可能的话，检查@后面的地址是否是真正的地址。如果我不能通过这个属性做到这一点，那么我将考虑使用JavaScript，但对于检查一个@和一个或多个点，我确实想肯定地使用pattern属性。

模式属性需要检查以下内容：

1. 只有一个@
2. 一个或多个点
3. 如果可能，检查@后面的地址是否为有效地址。

这个选项的另一个选择是使用JavaScript，但是对于所有其他条件，我不想使用JavaScript。

Answer 1

这是一个双重问题(与万维网世界中的许多问题一样)。

您需要评估浏览器是否支持html5 (我使用了现代派)。在这种情况下，如果您有一个正常的表单，浏览器将为您完成这项工作，但是如果您需要ajax/json (和许多日常情况一样)，那么无论如何您都需要执行手动验证。

。。因此，我的建议是在提交之前使用正则表达式来评估。我使用的表达式如下：

var email = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/;

这个是从http://www.regular-expressions.info/拿来的。这是一个难以理解和掌握的世界，所以我建议你仔细阅读这一页。

Answer 2

我在输入HTML5s电子邮件时遇到了这个问题，使用上面的Alwin的答案，我将正则表达式添加到HTML5电子邮件输入中，以便用户必须在最后有.something。

<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" />

Answer 3

不幸的是，所有的建议，除了从B-钱是无效的，在大多数情况下。

以下是许多有效的电子邮件，如：

• günter@web.de (德国货币)
• антон@россия.рф(俄语，рф是有效域)
• 中文和许多其他语言(例如国际电子邮件和链接规范)。

由于验证的复杂性，我提出了一个非常通用的解决方案：

<input type="text" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" title="Invalid email address" />

它检查电子邮件在"@“之前是否包含至少一个字符(也包括数字或除另一个"@”或空白以外的其他字符)，在"@“之后至少包含两个字符(或除另一个"@”或空白以外的其他字符)，以及中间的一个点。此模式不接受lol@company之类的地址，有时在内部网络中使用。但如果需要的话，可以使用这一种：

<input type="text" pattern="[^@\s]+@[^@\s]+" title="Invalid email address" />

这两种模式都接受不太有效的电子邮件，例如带有垂直选项卡的电子邮件。但对我来说已经足够好了。更强的检查，如试图连接到邮件服务器或ping域，无论如何应该发生在服务器端。

顺便说一句，我只是用novalidate编写了用于电子邮件验证的角指令(还没有经过很好的测试)，并且没有基于上面的模式来支持干原理：

.directive('isEmail', ['$compile', '$q', 't', function($compile, $q, t) {
    var EMAIL_PATTERN = '^[^@\\s]+@[^@\\s]+\\.[^@\\s]+$';
    var EMAIL_REGEXP = new RegExp(EMAIL_PATTERN, 'i');
    return {
        require: 'ngModel',
        link: function(scope, elem, attrs, ngModel){
            function validate(value) {
                var valid = angular.isUndefined(value)
                    || value.length === 0
                    || EMAIL_REGEXP.test(value);
                ngModel.$setValidity('email', valid);
                return valid ? value : undefined;
            }
            ngModel.$formatters.unshift(validate);
            ngModel.$parsers.unshift(validate);
            elem.attr('pattern', EMAIL_PATTERN);
            elem.attr('title', 'Invalid email address');
        }
    };
}])

用法：

<input type="text" is-email />

对于B-货币的模式是"@“就够了。但它拒绝了两个或更多的"@“和所有空格。