使用正则表达式进行电子邮件验证 --- 无法正常工作 JavaScript答案

【问题标题】：email validation with regex expression --- not working properly JavaScript使用正则表达式进行电子邮件验证 --- 无法正常工作 JavaScript
【发布时间】：2017-07-20 22:15:54
【问题描述】：

我有一个在提交表单时触发的 handleSubmit 函数。我正在收集用户电子邮件作为输入。我现有的代码不会拒绝无效条目，我不确定我错过了什么......

理想情况下，无效响应将触发警报框，但目前所有输入都被推送到数据库。

const handleSubmit = (e) => {
    let participantsName = e.target.participantsName.value;
    let participantsEmail = e.target.participantsEmail.value;
    let pattern = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;


    e.preventDefault();

    if (participantsName) {
        e.target.participantsName.value = "";
        Participants.insert({
            name: participantsName
        });
    }
    if (participantsEmail.match(pattern)) {
        e.target.participantsEmail.value = "";
        Participants.insert({
            email: participantsEmail
        });
        alert("Please enter a valid email address")
    }
}

【问题讨论】：

那你有什么问题？
为什么alert("Please enter a valid email address") 在检查电子邮件是否匹配模式的if 中？它应该在外面，在 else 子句中。
你能举一个你的程序没有捕捉到的无效输入的例子吗？
@Catalyst：感谢您的关注，我会相应更新。
您的正则表达式在很多层面上都是错误的...例如，有几个有效的 TLD 长度超过 3 个字符。 softwareengineering.stackexchange.com/questions/78353/…

标签： javascript regex email-validation

【解决方案1】：

将您的正则表达式更改为更广泛的正则表达式

let pattern = /^(([^<>()\[\]\\.,;:\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,}))$/;

【讨论】：

还是不够。您必须首先将输入的域部分转换为 punycode。

【解决方案2】：

来自 html5 的初步验证正则表达式

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

展开

 # http://www.w3.org/TR/html5/forms.html#valid-e-mail-address

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

【讨论】：

【解决方案3】：

感谢您的所有回复。通过一些小的改动，我的代码就可以工作了！

const handleSubmit = (e) => {
let participantsName = e.target.participantsName.value;
let participantsEmail = e.target.participantsEmail.value;
let pattern = /^(([^<>()\[\]\\.,;:\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,}))$/;



e.preventDefault();

if(participantsName && participantsEmail.match(pattern)){
  e.target.participantsName.value = "";
  e.target.participantsEmail.value = "";
    Participants.insert({
        name: participantsName,
        email: participantsEmail
    });
} else {
  e.target.participantsName.value = "";
  e.target.participantsEmail.value = "";
  alert("Please enter a valid email address")
 }
}

【讨论】：