Html HTML5 电子邮件验证

HTML5 Email Validation

提问by abcid d

It is said "With HTML5, we need no more js or a server side code to check if the user's input is a valid email or url address"

据说“使用 HTML5，我们不再需要 js 或服务器端代码来检查用户的输入是否是有效的电子邮件或 url 地址”

How can I validate email after a user enter? and without JS how to display a message if the user enter a wrong form of his/her email address.

用户输入后如何验证电子邮件？如果用户输入了他/她的电子邮件地址的错误形式，并且没有 JS 如何显示消息。

<input type="email" pattern="[^ @]*@[^ @]*" placeholder="Enter your email">
<input type="submit" value="Submit">

回答by Midhun MP

In HTML5 you can do like this:

在 HTML5 中，你可以这样做：

<form>
<input type="email" placeholder="Enter your email">
<input type="submit" value="Submit">
</form>

And when the user press submit, it automatically shows an error message like:

当用户按下提交时，它会自动显示如下错误消息：

回答by Stefan Ciprian Hotoleanu

The input type=emailpage of the www.w3.orgsite notes that an email address is any string which matches the following regular expression:

www.w3.org站点的input type=email页面指出，电子邮件地址是与以下正则表达式匹配的任何字符串：

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

Use the requiredattribute and a patternattribute to require the value to match the regex pattern.

使用required属性和pattern属性来要求值与正则表达式模式匹配。

<input
    type="text"
    pattern="/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/"
    required
>

回答by Van Nguyen

Using [a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}for [email protected]/ [email protected]

使用[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}了[email protected]/[email protected]

回答by Nakilon

document.getElementById("email").validity.valid

seems to be true when field is either empty or valid. This also has some other interesting flags:

当字段为空或有效时似乎为真。这还有一些其他有趣的标志：

Tested in Chrome.

在 Chrome 中测试。

回答by Keith H.

Here is the example I use for all of my form email inputs. This example is ASP.NET, but applies to any:

这是我用于所有表单电子邮件输入的示例。此示例是 ASP.NET，但适用于任何：

<asp:TextBox runat="server" class="form-control" placeholder="Contact's email" 
    name="contact_email" ID="contact_email" title="Contact's email (format: [email protected])" 
    type="email" TextMode="Email" validate="required:true"
    pattern="[a-zA-Z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*" >
</asp:TextBox>

HTML5 still validates using the pattern when not required. Haven't found one yet that was a false positive.

在不需要时，HTML5 仍会使用该模式进行验证。还没有找到一个是假阳性的。

This renders as the following HTML:

这将呈现为以下 HTML：

<input class="form-control" placeholder="Contact's email" 
    name="contact_email" id="contact_email" type="email" 
    title="Contact's email (format: [email protected])" 
    pattern="[a-zA-Z0-9!#$%&amp;'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*">

回答by karic83

I know you are not after the Javascript solution however there are some things such as the customized validation message that, from my experience, can only be done using JS.

我知道您不是在追求 Javascript 解决方案，但是根据我的经验，有些事情（例如自定义验证消息）只能使用 JS 来完成。

Also, by using JS, you can dynamically add the validation to all input fields of type email within your site instead of having to modify every single input field.

此外，通过使用 JS，您可以将验证动态添加到站点内所有电子邮件类型的输入字段，而不必修改每个输入字段。

var validations ={
    email: [/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/, 'Please enter a valid email address']
};
$(document).ready(function(){
    // Check all the input fields of type email. This function will handle all the email addresses validations
    $("input[type=email]").change( function(){
        // Set the regular expression to validate the email 
        validation = new RegExp(validations['email'][0]);
        // validate the email value against the regular expression
        if (!validation.test(this.value)){
            // If the validation fails then we show the custom error message
            this.setCustomValidity(validations['email'][1]);
            return false;
        } else {
            // This is really important. If the validation is successful you need to reset the custom error message
            this.setCustomValidity('');
        }
    });
})

回答by nbsamar

A bit late for the party, but this regular expression helped me to validate email type input in the client side. Though, we should always do verification in server side also.

聚会有点晚了，但是这个正则表达式帮助我验证了客户端的电子邮件类型输入。尽管如此，我们也应该始终在服务器端进行验证。

<input type="email" pattern="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$">

You can find more regex of all kinds here.

你可以在这里找到更多的各种正则表达式。

回答by Mikko Rantalainen

The only 100% correct method is to check for @-sign somewhere in the entered email address and then posting a validation message to given email address. If they can follow validation instructions in the email message, the inputted email address is correct.

唯一 100% 正确的方法是在输入的电子邮件地址的某处检查 @ 符号，然后将验证消息发布到给定的电子邮件地址。如果他们可以遵循电子邮件中的验证说明，则输入的电子邮件地址是正确的。

David Gilbertson wrote about thisyears ago:

大卫吉尔伯森多年前写道：

There are two questions we need to ask:

1. Did the user understand that they were supposed to type an email addressinto this field?
2. Did the user correctly type their email addressinto this field?

If you have a well laid-out form with a label that says “email”, and the user enters an ‘@' symbol somewhere, then it's safe to say they understood that they were supposed to be entering an email address. Easy.

Next, we want to do some validation to ascertain if they correctly entered their email address.

Not possible.

[...]

Any mistype will definitelyresult in an incorrect email address but only mayberesult in an invalid email address.

[...]

There is no point in trying to work out if an email address is ‘valid'. A user is far more likely to enter a wrong and validemail address than they are to enter an invalid one.

我们需要问两个问题：

1. 用户是否理解他们应该在此字段中键入电子邮件地址？
2. 用户是否在此字段中正确输入了他们的电子邮件地址？

如果您有一个布局合理的表单，带有“电子邮件”标签，并且用户在某处输入了“@”符号，那么可以肯定地说他们知道他们应该输入电子邮件地址。简单。

接下来，我们要做一些验证以确定他们是否正确输入了他们的电子邮件地址。

不可能。

[...]

任何输入错误将肯定导致不正确的电子邮件地址，但只可能导致一个无效的电子邮件地址。

[...]

尝试确定电子邮件地址是否“有效”是没有意义的。用户更有可能进入一个错误的和有效的比他们输入电子邮件地址无效的一个。

In addition, some email addresses that may be syntactically or politically invalid, do work. For example, postmaster@aidoes technically work even though TLDs should not have MX records. Also see discussion about email validation on the WHATWG mailing list(where HTML5 is designed in the first place).

此外，一些可能在语法上或上无效的电子邮件地址确实有效。例如，postmaster@ai即使 TLD 不应该有 MX 记录，在技​​术上也行得通。另请参阅WHATWG 邮件列表（首先设计 HTML5）上有关电子邮件验证的讨论。

回答by skpaik

You can follow this pattern also

你也可以遵循这个模式

<form action="/action_page.php">
  E-mail: <input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
  <input type="submit">
</form>

Ref : In W3Schools

参考：在 W3Schools

回答by Fabian Madurai

Using HTML 5,Just make the input email like :

使用 HTML 5，只需将输入电子邮件设为：

<input type="email"/>

When the user hovers over the input box, they will a tooltip instructing them to enter a valid email. However, Bootstrap forms have a much better Tooltip message to tell the user to enter an email address and it pops up the moment the value entered does not match a valid email.

当用户将鼠标悬停在输入框上时，他们会出现一个工具提示，指示他们输入有效的电子邮件。然而，Bootstrap 表单有一个更好的工具提示消息告诉用户输入一个电子邮件地址，它会在输入的值与有效电子邮件不匹配时弹出。