HTML5电子邮件输入模式属性

时间：2011-04-08 23:07:04

标签： html5 html-email email-validation html-input

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

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

pattern属性需要检查：

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

    4. 这个的替代方法是使用JavaScript但是对于所有其他条件我不想使用JavaScript

18 个答案:

答案 0 :(得分：59)

我有HTML5s电子邮件输入的确切问题，使用上面的Alwin Keslers答案我将正则表达式添加到HTML5电子邮件输入中，因此用户必须在最后有.something。

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

答案 1 :(得分：39)

这是一个双重问题（在万维网世界中很多）。

您需要评估浏览器是否支持html5（我使用Modernizr来执行此操作）。在这种情况下，如果您有一个普通的表格，浏览器将为您完成工作，但如果您需要ajax / json（尽可能多的日常情况），您仍需要执行手动验证。

..所以，我的建议是在提交前随时使用正则表达式进行评估。我使用的表达式如下：

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

这个来自http://www.regular-expressions.info/。这是一个难以理解和掌握的难题世界，因此我建议您仔细阅读本页。

答案 2 :(得分：23)

在HTML5中，您可以使用新的“电子邮件”类型：http://www.w3.org/TR/html-markup/input.email.html

例如：

<input type="email" id="email" />

如果浏览器实现HTML5，它将确保用户在该字段中输入了有效的电子邮件地址。请注意，如果浏览器未实现HTML5，则会将其视为“文本”类型，即：

<input type="text" id="email" />

答案 3 :(得分：18)

不幸的是，除了B-Money之外的所有建议在大多数情况下都无效。

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

  • günter@web.de（德语解密）
  • антон@россия.рф（俄语，рф是一个有效的域名）
  • 中文和许多其他语言（例如参见International email和链接规范）。

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

<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编写了角度指令（尚未经过良好测试），并且没有基于上述模式来支持DRY原则：

.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-Money的模式是“@”就够了。但它会减少两个或更多“@”和所有空格。

答案 4 :(得分：7)

这是我正在使用的方法，您可以根据自己的需要进行修改：

^[\w]{1,}[\w.+-]{0,}@[\w-]{2,}([.][a-zA-Z]{2,}|[.][\w-]{2,}[.][a-zA-Z]{2,})$

说明：

  1. 我们希望确保电子邮件地址始终以单词开头：

    <强> ^ [\ W]

    2. 单词是任何字符，数字或下划线。你可以使用[a-zA-Z0-9_]模式，但它会给你相同的结果并且它会更长。

    1. 接下来，我们要确保至少有一个这样的角色：

      ^ [\ W]的 {1，}

    2. 接下来，我们要允许名称中的任何单词，数字或特殊字符。这样，我们可以确定电子邮件不会以点开头，但可以包含除第一个位置以外的点：

      ^ [\ W] {1，}的 [\ W + - 。]

    3. 当然，没有任何此类字符，因为电子邮件地址只能跟一个字母后跟@：

      ^ [\ W] {1，} [\ W + - 。]的 {0，}

    4. 接下来，我们需要@字符是强制性的，但整个电子邮件中只能有一个字符：

      ^ [\ W] {1，} [\ W + - 。] {0，}的 @

    5. 在@字符后面，我们想要域名。在这里，您可以定义最少的字符数和字符范围。我会搜索所有单词字符，包括连字符 [\ w - ] ，我希望其中至少有两个 {2，} 。如果您想允许 t.co 等域名，则必须允许此范围内的一个字符 {1，} ：

      ^ [\ W] {1，} [\ W + - 。] {0，} @的 [\瓦特 - ] {2，}

    6. 接下来，我们需要处理两个案例。要么只有域名后跟域名扩展名，要么有子域名后跟域名后跟扩展名，例如 abc.com 与 abc.co.uk 即可。为了实现这一目标，我们需要使用（a | b）标记，其中 a 代表第一种情况， b 代表第二种情况case和 | 代表逻辑OR。在第一种情况下，我们将只处理域扩展，但由于它总是存在，无论如何，我们可以安全地将其添加到两种情况：

      ^ [\ W] {1，} [\ W + - 。] {0，} @ [\瓦特 - ] [。] {2，}的（[A-ZA-Z] {2， } | [。] [A-ZA-Z] {2，}）

      7. 这种模式表明我们只需要一个点字符后跟字母，没有数字，在这两种情况下我们至少需要其中两个。

      1. 对于第二种情况，我们会在域名扩展名前添加域名，从而使原始域名成为子域名：

        ^ [\ W] {1，} [\ W + - 。] {0，} @ [\瓦特 - ] {2，}（[A-ZA-Z] {2，} [。] | <强> [\瓦特 - ] [] [] {2，} [A-ZA-Z] {2，}）

        2. 域名可以包含单词字符，包括连字符，我们在这里至少需要两个字符。

        1. 最后，我们需要标记整个模式的结束：

          ^ [\ W] {1，} [\ W + - 。] {0，} @ [\瓦特 - ] {2，}（[A-ZA-Z] {2，} [。] | [ ] [\ W - {2，} [] [A-ZA-Z] {2，}）的 $

        2. 转到此处测试您的电子邮件是否与模式匹配：https://regex101.com/r/374XLJ/1

答案 5 :(得分：6)

<input name="email" type="email" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{1,63}$" class="form-control" placeholder="Email*" id="email" required="">

这是上述解决方案的修改版本，也接受大写字母。

答案 6 :(得分：4)

我使用以下Regex来满足以下电子邮件。

abc@example.com # Minimum three characters
ABC.xyz@example.com # Accepts Caps as well.
abce.xyz@example.co.in # Accepts . before @

代码

<input type="email" pattern="[A-Za-z0-9._%+-]{3,}@[a-zA-Z]{3,}([.]{1}[a-zA-Z]{2,}|[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,})" />

答案 7 :(得分：4)

 bower_components/ag-grid-community/dist/lib/filter/provided/providedFilter.d.ts(50,5): error TS2416: Property 'setModel' in type 'ProvidedFilter' is not assignable to the same property in base type 'IFilterComp'.
      Type '(model: ProvidedFilterModel) => Promise<void>' is not assignable to type '(model: any) => void | Promise<void>'.
        Type 'Promise<void>' is not assignable to type 'void | Promise<void>'.
          Type 'Promise<void>' is missing the following properties from type 'Promise<void>': listOfWaiters, firstOneOnly, map
    bower_components/ag-grid-community/dist/lib/filter/provided/simpleFilter.d.ts(83,15): error TS2416: Property 'setModelIntoUi' in type 'SimpleFilter<M>' is not assignable to the same property in base type 'ProvidedFilter'.
      Type '(model: ISimpleFilterModel | ICombinedSimpleModel<M>) => Promise<void>' is not assignable to type '(model: ProvidedFilterModel) => Promise<void>'.
        Property 'waiters' is missing in type 'ag.grid.Promise<void>' but required in type 'import("D:/svn/Trunk/MAP/WebDev/bower_components/ag-grid-community/dist/lib/utils/promise").Promise<void>'.
    bower_components/ag-grid-community/dist/lib/filter/provided/simpleFilter.d.ts(91,15): error TS2416: Property 'resetUiToDefaults' in type 'SimpleFilter<M>' is not assignable to the same property in base type 'ProvidedFilter'.
      Type '(silent?: boolean) => ag.grid.Promise<void>' is not assignable to type '(silent?: boolean) => import("D:/svn/Trunk/MAP/WebDev/bower_components/ag-grid-community/dist/lib/utils/promise").Promise<void>'.
        Type 'ag.grid.Promise<void>' is not assignable to type 'import("D:/svn/Trunk/MAP/WebDev/bower_components/ag-grid-community/dist/lib/utils/promise").Promise<void>'.
    bower_components/ag-grid-community/dist/lib/headerRendering/headerRootComp.d.ts(34,28): error TS2583: Cannot find name 'Map'. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.

Demo - Test the email input

答案 8 :(得分：3)

你可能想要这样的东西。请注意属性：

  • 需要
  • 类型=电子邮件
  • 自动对焦
  • 图案

<input type="email" value="" name="EMAIL" id="EMAIL" placeholder="your@email.com" autofocus required pattern="[^ @]*@[^ @]*" />

答案 9 :(得分：3)

<input type="email" name="email" id="email" value="" placeholder="Email" required />

文档http://www.w3.org/TR/html-markup/input.email.html

答案 10 :(得分：3)

如果您不想写有关电子邮件标准的白皮书，请使用下面的示例，该示例仅介绍了一个众所周知的CSS属性（text-transform：小写字母）来解决该问题：

<input type="email" name="email" id="email" pattern="[a-zA-Z0-9._%+-]+@[a-z0-9.-]+\.[a-zA-Z]{2,4}" style="text-transform: lowercase" placeholder="enter email here ..." title="please enter a valid email" />

答案 11 :(得分：3)

另一种基于w3org规范的解决方案 原始正则表达式取自w3org 最后一个＆＃34; * 懒惰量词＆＃34;在这个正则表达式中被替换为＆＃34; + 一个或多个量词＆＃34;。
这种模式完全符合规范，但有一个例外：它不允许顶级域名地址，例如＆＃34; foo @ com ＆＃34; 

<input
    type="email" 
    pattern="[a-zA-Z0-9.!#$%&amp;’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+"
    title="valid@email.com"
    placeholder="valid@mail.com"
    required>

答案 12 :(得分：2)

更新2018答案

转到此处http://emailregex.com/

Javascript：

/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

答案 13 :(得分：1)

一个简单的好答案可以是这样的输入：

2021 更新并支持 IE10+

^(?![_.-])((?![_.-][_.-])[a-z\d_.-]){0,63}[a-z\d]@((?!-)((?!--)[a-z\d-]){0,63}[a-z\d]\.){1,2}([a-z]{2,14}\.)?[a-z]{2,14}$

input:not(:placeholder-shown):invalid{
  background-color:pink;
  box-shadow:0 0 0 2px red;
}
/* :not(:placeholder-shown) = when it is empty, do not take as invalid */
/* :not(:-ms-placeholder-shown) use for IE11 */
/* :invalid = it is not followed pattern or maxlength and also if required and not filled */
/* Note: When autocomplete is on, it is possible the browser force CSS to change the input background and font color, so i used box-shadow for second option*/
Type your Email:
<input 
  type="email"
  name="email"
  lang="en"
  maxlength="254"
  value=""
  placeholder="example@domain.com"
  autocapitalize="off" spellcheck="false" autocorrect="off"
  autocomplete="on"
  required=""
  inputmode="email"
  pattern="(?![_.-])((?![_.-][_.-])[a-z\d_.-]){0,63}[a-z\d]@((?!-)((?!--)[a-z\d-]){0,63}[a-z\d]\.){1,2}([a-z]{2,14}\.)?[a-z]{2,14}">

根据以下内容：

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email

  • 域名的最大长度（254 个字符）
  • 可能的最长子域（可能=0-64 个字符）、域（=0-64 个字符）、一级扩展（= 2-14 个字符），二级扩展（可能 = 2-14 个字符），正如@Brad 所暗示的那样。
  • 避免在电子邮件名称中使用不常用但允许使用的字符，而只接受 Outlook、Yahoo、Gmail 等著名免费电子邮件服务只接受它们的常用字符。这意味着只接受：点 (.)、破折号 (-)、下划线 (_) 就在 az 之间> （小写） 和数字，并且不接受双排，最多64 个字符。

注意：现在，URL 中可以使用更长的地址甚至 Unicode 字符，用户也可以向本地或 IP 发送电子邮件，但我认为还是不要接受不寻常的东西更好如果目标页面是公开的。

正则表达式说明：

  1. (?![_.-]) 不是以这些开头的： _ 。 -
  2. ((?!--)[a-z0-9-]) 接受直到 z 和数字和 -（破折号）但不接受 --
  3. ((?![_.-][_.-])[a-z0-9_.-]) 从 a 到 z 小写字母和数字以及 _ 。 - 接受但不是任何形式的双重。
  4. {0,63} 长度从 0 到 63（第二组 [a-z0-9] 将填充 +1 但不要让字符为 _ . -）
  5. @ at 符号
  6. (rule){1,2} 这个规则应该出现 1 到 2 次。 （用于子域和域）
  7. (rule)? 或 ((rule)|) 不存在或如果存在则应遵循规则。 （用于二级扩展）
  8. \. 点

试试正则表达式：https://regexr.com/5v22q

注意：在输入模式中不需要使用 ^...$，但对于一般的 RegEx 测试则需要。这意味着字符串的开始/结束应该与规则相同，而不仅仅是一部分。

属性说明：

type="email" 或 type="text" （在现代浏览器中将有助于验证，它也不关心验证或获取值的开始或结束空间）

email 浏览器记住上次填写的简单输入以自动完成

name="email" autocomplete="on" 帮助默认输入为英文

lang="en" 将有助于触摸键盘更加兼容

inputmode="email" 设置输入的最大长度

maxlength="254" 关闭浏览器中可能出现的错误自动更正器

autocapitalize="off" spellcheck="false" autocorrect="off" 此字段为必填项，如果为空或无效，则不提交表单

required="" 里面的正则表达式会检查验证

答案 14 :(得分：0)

以下正则表达式模式应适用于大多数电子邮件，包括俄语电子邮件。

void screenshot(POINT a, POINT b) { // copy screen to bitmap HDC hScreen = GetDC(NULL); HDC hDC = CreateCompatibleDC(hScreen); HBITMAP hBitmap = CreateCompatibleBitmap(hScreen, abs(b.x - a.x), abs(b.y - a.y)); HGDIOBJ old_obj = SelectObject(hDC, hBitmap); BOOL bRet = BitBlt(hDC, 0, 0, abs(b.x - a.x), abs(b.y - a.y), hScreen, a.x, a.y, SRCCOPY); // save bitmap to clipboard OpenClipboard(NULL); EmptyClipboard(); SetClipboardData(CF_BITMAP, hBitmap); CloseClipboard(); // clean up SelectObject(hDC, old_obj); DeleteDC(hDC); ReleaseDC(NULL, hScreen); DeleteObject(hBitmap); } int main() { POINT a, b; a.x = 0; a.y = 0; b.x = 10000; b.y = 10000; screenshot(a, b); }

答案 15 :(得分：0)

^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$

答案 16 :(得分：0)

我测试了以下正则表达式，它提供了与Chrome Html电子邮件输入验证相同的结果。

[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9-]+(\.[a-z0-9-]+)*

您可以在本网站上测试： regex101

答案 17 :(得分：-1)

pattern="[a-z0-9._%+-]{1,40}[@]{1}[a-z]{1,10}[.]{1}[a-z]{3}"

<input type="email"  class="form-control" id="driver_email" placeholder="Enter Driver Email" name="driver_email" pattern="[a-z0-9._%+-]{1,40}[@]{1}[a-z]{1,10}[.]{1}[a-z]{3}" required="">
相关问题
最新问题