Javascript 电子邮件无效>；需要用户保持在同一页上吗

我创建了一个web表单，用于捕获用户的电子邮件地址。我已经设置了需要满足的条件，以便用户能够提交他们的电子邮件地址，并且我能够成功返回错误消息

但是，如果用户生成的输入代码无效，则在结束错误后，仍会将其定向到下一个屏幕

HTML:

        <form class="watch-films" onsubmit="location.href='thankYou_watch.html'">
            <p class="paid_in_full">Email</p>
            <input class="field2" name="viewerEmail" id="viewerEmail" placeholder="youremail@example.com" required>
            <div>
                <button type="submit" class="button_done" value="submit">Submit</button>
            </div>
        </form>

---

谢谢你的帮助

您有一个提交事件处理程序，无论其他提交事件处理程序的结果如何，它都会将浏览器重定向到感谢页面

由于它重定向，它将停止数据提交，因此您不会收集电子邮件地址

完全摆脱它

---

让读取已提交表单数据的服务器端进程生成感谢页面。

只需将

位置。href='thankYou\u watch.html'

移到侦听器函数中，而不是返回true。在事件侦听器中，我可以将其放置在何处？谢谢你的回复！只需使用以下内容：（注意表单的

action

属性，该属性应指向处理表单的后端脚本）我想我明白您的意思了，谢谢！谢谢你的回复@Quentin。我按照您的建议删除了提交事件处理程序，并尝试将其添加到我的javascript中，可能不正确：`if（viewerEmailPattern.test（viewerEmail））{return（true）；window.location.href=“thankYou_watch.html”；}else{alert（“您输入了无效的电子邮件地址！”）return（false）；}`正确输入的电子邮件没有登录到控制台，页面也没有重定向。错误仍在显示！想想

return

做了什么……我说要把

位置

的东西全部移走。如果您想收集电子邮件地址，那么您必须让表单提交到服务器端进程。

const watchForm = document.querySelector('.watch-films'); 
const feedback = document.querySelector('.feedback'); 
const viewerEmailPattern = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; 


watchForm.addEventListener('submit', e=> {
    e.preventDefault(); 
    //validation
    const viewerEmail = watchForm.viewerEmail.value; 

    if(viewerEmailPattern.test(viewerEmail)){
      return (true)
    } else {
      alert("You have entered an invalid email address!")
      return (false); 
    }

    console.log(watchForm.viewerEmail.value);
});  

onsubmit="location.href='thankYou_watch.html'"