html5 电子邮件验证失败答案

【问题标题】：html5 e-mail validation failedhtml5 电子邮件验证失败
【发布时间】：2021-12-28 03:48:42
【问题描述】：

我有这个简单的电子邮件地址输入字段：

<form>
<input type="email" placeholder="E-Mail" required>
<input type="submit" value="Send" />
</form>

如果您写“max@mail.de”，您可以提交表单，因为电子邮件是有效的。如果写“max@.de”，则无法提交表单，因为邮箱无效。

但是！

如果你写“max@i9”，你也可以提交表格。但是邮件无效。为什么？我该如何解决？

【问题讨论】：

标签： html forms

【解决方案1】：

因为max@i9 是一封有效的电子邮件，正如article 中所述。您可以通过添加自己的电子邮件模式来“修复”它，请参阅tutorial：

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

这里有一个关于Why does HTML5 form validation allow emails without a dot?的更详细的问题

【讨论】：

【解决方案2】：

<form>
<input pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}$" 
type="text" required />
<input type="submit" value="Send" />
</form>

【讨论】：

【解决方案3】：

这是因为 HTML5 type="email" 验证器只能在您的输入字符串中找到 @ 符号。如果发现您的表单将提交，否则将不会提交。为避免这种情况，您必须像这样使用 javaSctipt 表单验证：-

function validateemail()  
{  
var x=document.myform.email.value;  
var atposition=x.indexOf("@");  
var dotposition=x.lastIndexOf(".");  
if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){  
  alert("Please enter a valid e-mail address \n atpostion:"+atposition+"\n dotposition:"+dotposition);  
  return false;  
  }  
  
}

【讨论】：

【解决方案4】：

HTML不能帮你做数据校验，你可以学js来做

【讨论】：