HTML5电子邮件validation

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

如何在用户input后validation电子邮件？ 如果用户input他/她的电子邮件地址的错误forms，没有JS如何显示消息。

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

Answer 1

在HTML5中，你可以这样做：

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

而当用户按提交，它会自动显示一个错误消息，如：

Answer 2

input type=email http://www.w3.org站点的;input type=email页面注意到，电子邮件地址是与以下正则expression式匹配的任何string：

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

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

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

Answer 3

使用[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,} [e-mail] / [e-mail]

Answer 4

以下是我用于所有表单电子邮件input的示例。 这个例子是ASP.NET，但适用于任何：

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

不需要时，HTML5仍然使用该模式进行validation。 还没有find一个这是一个误报。

这呈现为以下HTML：

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

Answer 5

我知道你不是在Javascript解决scheme之后，但是有一些东西，比如定制的validation信息，根据我的经验，只能用JS完成。

而且，通过使用JS，您可以dynamic地将validation添加到您的站点内的所有types为电子邮件的input字段，而不必修改每个input字段。

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

Answer 6

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

当字段为空或有效时似乎是真实的。 这也有一些有趣的标志：

在Chrome中testing

Answer 7

使用HTML5属性“模式”来正确validation电子邮件是非常困难的。 如果你不使用“模式”，将会处理someone @。 这不是有效的电子邮件。

使用pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"将要求的格式为[e-mail]但是如果发件人的格式为[e-mail] （或类似）将不会被validation来解决这个问题可以放pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"这将validation.com.au或.net.au或类似。

但是，使用这个，它不会允许[e-mail]。 所以就简单地使用HTML5来validation电子邮件地址仍然不完全与我们。 要完成这个你会使用这样的东西：

 <form> <input id="email" type="text" name="email" pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" required placeholder="Enter you Email"> <br> <input type="submit" value="Submit The Form"> </form> 

要么：

 <form> <input id="email" type="text" name="email" pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" required placeholder="Enter you Email"> <br> <input type="submit" value="Submit The Form"> </form> 

但是，我不知道如何使用HTML5模式属性validation两个或所有版本的电子邮件地址。