时间戳

首页 > 解决方案 > 有没有办法使用防止默认并仍然接收发布请求？

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

问题描述

我正在尝试在我的后端正确验证表单数据，并且仍然能够在我的前端使用 Javascript 编写的表单验证获得良好的用户体验。我在前端完成了所有的表单验证，以便获得我们希望e.PreventDefault()在提交按钮上使用的效果，这样我们就可以向用户显示任何输入错误而无需重新加载。问题是当您现在实际填写表单并单击提交时，由于 preventDefault，没有向服务器发送 POST 请求。

完全删除该行似乎解决了我们的服务器没有接收到 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

    } if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
        document.querySelector('.emailError').innerHTML = 'Please enter a valid email'
        document.querySelector('.email').style.borderBottom = '1px solid red'

    } else if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
        document.querySelector('.emailError').innerHTML = null
        document.querySelector('.email').style.borderBottom = '1px solid #2ecc71'
        emailSubmit = true

    } if (/^\s+$/.test(createPassword) || createPassword == null || createPassword == '' || createPassword.length < 6) {
        document.querySelector('.createPasswordError').innerHTML = 'Password must be longer than 6 characters'
        document.querySelector('.createPassword').style.borderBottom = '1px solid red'

    } else if (!/^\s+$/.test(createPassword) || createPassword !== null || createPassword !== '' || createPassword.length >= 6) {
        document.querySelector('.createPasswordError').innerHTML = null
        document.querySelector('.createPassword').style.borderBottom = '1px solid #2ecc71'
        createPasswordSubmit = true

    } if (!createPasswordSubmit) {
        document.querySelector('.verifyPasswordError').innerHTML = `Passwords don't match`
        document.querySelector('.verifyPassword').style.borderBottom = '1px solid red'

    } else if (verifyPassword == createPassword){
        document.querySelector('.verifyPasswordError').innerHTML = null
        document.querySelector('.verifyPassword').style.borderBottom = '1px solid #2ecc71'
        verifyPasswordSubmit = true
    }

去后端 Halders：

http.HandleFunc("/signup", signupHandler) // inside func main()


func signupHandler(w http.ResponseWriter, r *http.Request) {
    if r.Method != "POST" {
        tpl.ExecuteTemplate(w, "signup.html", nil)
        fmt.Printf("METHOD: %s | URL: %v\n", r.Method, r.URL)
        return
    }
    fmt.Printf("METHOD: %s | URL: %v\n", r.Method, r.URL)

    r.ParseForm()
    f := r.PostFormValue("fname")
    l := r.PostFormValue("lname")
    e := r.PostFormValue("email")
    pw := r.PostFormValue("pass")

    hash, err := helper.HashPassword(pw) 
    if err != nil {
        fmt.Printf("Hashing Error")
    }

    fmt.Println("LoginValues")
    fmt.Printf("%s\n, %s\n, %s\n, %s\n", f, l, e, hash)
}

注册模板 HTML：

<form action="/signup" method="post">
     <h3>First Name</h3>
     <input name="fname" type="text" class="firstName">
     <p class="firstNameError"></p>
     <h3>Last Name</h3>
     <input name="lname" type="text" class="lastName">
     <p class="lastNameError"></p>
     <h3>Email</h3>
     <input name="email" type="text" class="email">
     <p class="emailError"></p>
     <h3>Create Password</h3>
     <input name="pass" type="password" class="createPassword">
     <p class="createPasswordError"></p>
     <h3>Verify Password</h3>
     <input type="password" class="verifyPassword">
     <p class="verifyPasswordError"></p>
     <button class="btn" type="submit">Register</button>
</form>

我只是想知道是否可以使用preventDefault 来解决前端表单验证的问题，或者我是否需要以不同的方式来处理这个概念，如果是这样的话怎么办？提前致谢！

标签： javascriptvalidationhttp-postpreventdefault

解决方案

Because it's a type="submit" button, event.preventDefault() is preventing the "submit" event from firing (and the "submit" event is what sends the data to the backend).

Instead of listening for a "click" event on the button, I think it is better listen to a "submit" event on the form. It will be triggered on the form when you click a button with type="submit."

The form will now be the event's target.

let form = document.getElementById('my-form')
form.addEventListener('submit', function(event) {})

So, at the beginning of your function, you should be able to prevent the submit action by calling 

event.preventDefault();

But, you can also store the form to a local variable, since that is the element that the submit event is triggering on:

let form = event.target

Then, if there are no errors, you can trigger the submit on the form at the end of your function:

form.submit()

all together:

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()
   }
})

(There might be a better way, but that's what I could think of off the top of my head. Also, it might be easier to get all of the data values by adding a "name" attribute to each input, instead of querying each field).

推荐阅读