Javascript 如何更改此电子邮件表单验证代码以正确运行？

这是我的js。我正在尝试创建电子邮件表单验证，但它不起作用。每次点击提交，它都会自动将您发送到谷歌，如果输入内容有效，即使输入内容为空或不正确，它也会将您发送到谷歌

var txtEmail = document.querySelector("email");
var txtFeedback = document.querySelector('#txtFeedback');
var errorDivs = document.getElementsByClassName("error");





formReference.addEventListener('submit', onFormSubmit);


function onFormSubmit(event) {


    var isValid = true;


    //clear out the feedback div
   txtFeedback.innerHTML = "";

   //clear out the error divs
   for(var i = 0; i < errorDivs.length; i++) {
    errorDivs[i].innerHTML = "";
  }


  if ( txtEmail.value == "" || !/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(txtEmail.value)){
isValid = false;
txtFeedback.innerHTML += "<p>Please enter a valid email address.</p>";
txtEmail.nextElementSibling.innerHTML = "Please enter a valid email    address."


  } if(!isValid) {
    event.preventDefault();
   }
}

HTML

第一行选择电子邮件元素

将其更改为选择id为电子邮件的元素：

var txtEmail = document.querySelector("#email");

并且您没有在代码中声明formReference

我是这样宣布的，效果很好

var formReference = document.getElementById('myForm');

---

txtEmail的querySelector引用是否应该是电子邮件而不仅仅是电子邮件？您可以添加HTML吗？不，这不会改变任何内容您确定您是在最后一个if中输入的吗？您是否尝试在其中添加警报，或设置断点？根据我的记忆，您还应该添加一个“return false；”在最后一个if中，我试图阻止表单发送数据。我只是在为电子邮件随机添加字母，它正在运行，就好像它是有效的一样。如果我的正则表达式是正确的，那么我相信如果输入无效，TXT反馈应该运行，说请输入有效的电子邮件地址

var formReference = document.getElementById('myForm');