HTML5 电子邮件输入类型接受无效的邮件 ID答案

【问题标题】：HTML5 email input type accepts invalid mail idHTML5 电子邮件输入类型接受无效的邮件 ID
【发布时间】：2017-04-13 00:28:49
【问题描述】：

我有一个表单，其中包含输入类型为电子邮件和提交按钮的输入。上下文是，当用户从登录页面单击“忘记密码”时，将显示此特定表单，用户可以在其中输入他们的电子邮件 ID 并获取通过邮件重置密码的链接。

除了输入类型 email 接受 abc@com 之外，一切正常，因为我希望电子邮件 ID 为 abc@def.com。问题是，如果用户错误地输入 abc@com 而不是 abc@def.com，他们将不会收到重置密码链接，并且他们不会知道想要出错。

我想要解决这个问题。

【问题讨论】：

您需要验证电子邮件地址 - 但请注意，根据 specification，abc@com 被视为有效电子邮件 - 它匹配正则表达式 ^[a-zA-Z0-9。 !#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+) *$
仅仅因为您验证了电子邮件地址并不意味着他们会正确处理。您只是涵盖了他们可能犯的许多可能错误之一。 :-/

标签： javascript regex html email

【解决方案1】：

使用像这样的一些正则表达式 Regex demo ./\b(\w+)(\@)(.*)(\.)(\w+)\b 。在你的字符串中检查.下一个位置@。 \b 它会设置单词边界，匹配特定的一个

var check = function(){
 var input =  document.getElementById('test').value;
 var checking = input.match(/\b(\w+)(\@)(.*)(\.)(\w+)\b/g);
  if(checking){
    console.log('accepted');
    }
  else{
    console.log('reject')
    }
  }

<input type="email" id="test"  value="abc@com">
<button onclick="check()">validate</button>

【讨论】：