有没有办法使用防止默认并仍然接收发布请求？

Question

我正在尝试在我的后端正确验证表单数据，并且仍然能够在我的前端使用 Javascript 编写的表单验证获得良好的用户体验。我在前端完成了所有表单验证，以便获得我们想要e.PreventDefault()在提交按钮上使用的效果，以便我们可以向用户显示任何输入错误而无需重新加载。问题是当您现在实际填写表单并单击提交时，由于 preventDefault 没有将 POST 请求发送到服务器。完全删除该行似乎解决了我们的服务器未收到发布请求的问题，但这会导致前端表单验证完全没有意义，因为由于刷新页面而未显示错误消息。Javascript 前端验证：let btn = document.querySelector('.btn')btn.addEventListener('click', function(e) {    e.preventDefault() // <---- THIS IS THE ISSUE    let firstName = document.querySelector('.firstName').value    let lastName = document.querySelector('.lastName').value    let email = document.querySelector('.email').value    let createPassword = document.querySelector('.createPassword').value    let verifyPassword = document.querySelector('.verifyPassword').value    let firstNameSubmit = false    let lasttNameSubmit = false    let emailSubmit = false    let createPasswordSubmit = false    let verifyPasswordSubmit = false    if (/^\s+$/.test(firstName) || firstName == null || firstName == '') {        document.querySelector('.firstNameError').innerHTML = 'First Name is a required field'        document.querySelector('.firstName').style.borderBottom = '1px solid red'    } else if (!/^\s+$/.test(firstName) || firstName !== null || firstName !== '') {        document.querySelector('.firstNameError').innerHTML = null        document.querySelector('.firstName').style.borderBottom = '1px solid #2ecc71'        firstNameSubmit = true    } if (/^\s+$/.test(lastName) || lastName == null || lastName == '') {        document.querySelector('.lastNameError').innerHTML = 'Last Name is a required field'        document.querySelector('.lastName').style.borderBottom = '1px solid red'    } else if (!/^\s+$/.test(lastName) || lastName !== null || lastName !== '') {        document.querySelector('.lastNameError').innerHTML = null        document.querySelector('.lastName').style.borderBottom = '1px solid #2ecc71'        lasttNameSubmit = true    } 我只是想知道是否有解决前端和后端表单验证的方法，或者使用 preventDefault 或者我是否需要以不同的方式处理这个概念，如果是这样，如何？提前致谢！

Answer 1

因为它是一个 type="submit" 按钮，所以 event.preventDefault() 阻止了 "submit" 事件触发（而 "submit" 事件是将数据发送到后端的原因）。

与其在按钮上监听“点击”事件，我认为最好在表单上监听“提交”事件。当您单击 type="submit" 的按钮时，它将在表单上触发。

表单现在将成为事件的目标。

let form = document.getElementById('my-form')

form.addEventListener('submit', function(event) {})

因此，在您的函数开始时，您应该能够通过调用来阻止提交操作

event.preventDefault();

但是，您也可以将表单存储到局部变量中，因为这是触发提交事件的元素：

let form = event.target

然后，如果没有错误，您可以在函数结束时触发表单上的提交：

form.submit()

全部一起：

let form = document.getElementById('my-form')

form.addEventListener('submit', function(event) {

   event.preventDefault()

   let form = event.target

   let errors = false;

   //do all of the error checking here, if there's an error, set errors to true

   if(!errors) {

       form.submit()

   }

})

（可能有更好的方法，但这是我能想到的。此外，通过向每个输入添加“名称”属性而不是查询每个输入，获取所有数据值可能更容易场地）。