我正在嘗試在我的后端正確驗(yàn)證表單數(shù)據(jù)，并且仍然能夠在我的前端使用 Javascript 編寫的表單驗(yàn)證獲得良好的用戶體驗(yàn)。我在前端完成了所有表單驗(yàn)證，以便獲得我們想要e.PreventDefault()在提交按鈕上使用的效果，以便我們可以向用戶顯示任何輸入錯誤而無需重新加載。問題是當(dāng)您現(xiàn)在實(shí)際填寫表單并單擊提交時，由于 preventDefault 沒有將 POST 請求發(fā)送到服務(wù)器。完全刪除該行似乎解決了我們的服務(wù)器未收到發(fā)布請求的問題，但這會導(dǎo)致前端表單驗(yàn)證完全沒有意義，因?yàn)橛捎谒⑿马撁娑达@示錯誤消息。Javascript 前端驗(yàn)證：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 } 我只是想知道是否有解決前端和后端表單驗(yàn)證的方法，或者使用 preventDefault 或者我是否需要以不同的方式處理這個概念，如果是這樣，如何？提前致謝！
有沒有辦法使用防止默認(rèn)并仍然接收發(fā)布請求？
慕斯709654
2021-06-01 16:46:20
