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

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) {&nbsp; &nbsp;event.preventDefault()&nbsp; &nbsp;let form = event.target&nbsp; &nbsp;let errors = false;&nbsp; &nbsp;//do all of the error checking here, if there's an error, set errors to true&nbsp; &nbsp;if(!errors) {&nbsp; &nbsp; &nbsp; &nbsp;form.submit()&nbsp; &nbsp;}})（可能有更好的方法，但这是我能想到的。此外，通过向每个输入添加“名称”属性而不是查询每个输入，获取所有数据值可能更容易场地）。