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

我有一个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")
    }
}

---

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

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,}))$/;

let pattern=/^（（[^（）\[\]\\，；：\s@“]+（\.[^（）\[\]\，；：\s@“]+）*）（“+”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}]）；（[a-zA Z-Z-0-9]++-]；

来自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] 
      )?
 )*
 $ 

---

谢谢你的回复。通过一些小改动，我让代码开始工作了

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")
 }
}

const handleSubmit=（e）=>{
让participantsName=e.target.participantsName.value；
让participantsEmail=e.target.participantsEmail.value；
让模式=/^（[^（）\[\]\\，；：\s@“]+（\.[^（）\[\]\，；：\s@“]+）*）（“+”）@（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.]）；（[a-zA Z-0-9]++\]；
e、 预防默认值（）；
if（participantsName&&participantsEmail.match（模式））{
e、 target.participantsName.value=“”；
e、 target.participantsEmail.value=“”；
与会者：插入({
姓名：参与者姓名，
电子邮件：参与者电子邮件
});
}否则{
e、 target.participantsName.value=“”；
e、 target.participantsEmail.value=“”；
警报（“请输入有效的电子邮件地址”）
}
}

if检查电子邮件是否与模式匹配的

中为什么会出现此
警报（“请输入有效的电子邮件地址”）
？它应该在外部，在
else
子句中。你能举一个例子说明你提交的无效输入没有被你的程序捕获吗？@Catalyst:谢谢你捕获，我会相应地更新。你的正则表达式在很多级别上都是错误的。。。例如，存在多个长度超过3个字符的有效TLD。这还不够。您必须首先将输入的域部分转换为punycode。