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

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

使用后端程序：

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解决前端表单验证的问题，或者是否需要以不同的方式处理该概念？预先感谢！

Answer 1

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

与监听按钮上的“ click”事件相比，我认为最好监听表单上的“ submit”事件。当您单击类型为“ submit”的按钮时，它将在表单上触发。

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

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

因此，在函数开始时，您应该可以通过调用

来阻止提交操作。

event.preventDefault();

但是，您也可以将表单存储到本地变量，因为这是submit事件触发的元素：

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

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

Answer 2

我通过弄乱@Maiya提供的方法解决了该问题。我退后了一步，重新评估了javascript以及到底发生了什么。使用了一个甚至提交监听器，并且在前端进行了基本的表单验证，现在我可以确保在后端进行验证。将表单实例存储在变量中然后检查并提交后，我最终使用了e.preventDefault()，

Javascript更改：

let submit = document.getElementById("signupForm")

submit.addEventListener("submit", function(e){
    let form = e.target // get form instance
    e.preventDefault()
    console.log(form)
    // error handling
    if (firstNameSubmit == false || lasttNameSubmit  == false || emailSubmit == false || createPasswordSubmit == false || verifyPasswordSubmit == false) {
        console.log('form not done')
    } else { // form completed send to backend!
        form.submit()
    }

SignupHandler的更改：

user := &User{
        fname: r.PostFormValue("fname"),
        lname: r.PostFormValue("lname"),
        email: r.PostFormValue("email"),
        pw:    r.PostFormValue("pass"),
    }
    user.hash = string(helper.HashPassword(user.pw))

    //begin server validation
    if user.fname == "" {
        http.Redirect(w, r, "/signup", http.StatusBadRequest)
        tpl.ExecuteTemplate(w, "signup.html", nil)
    } else {
        http.Redirect(w, r, "/login", http.StatusOK)
    }

有没有一种方法可以使用阻止默认设置并仍然接收发布请求？

2 个答案: