表单提交总是返回 true 而它应该返回 false

Question

我在使用此代码提交之前验证表单

<form method="post" onsubmit="return reg()">
<table>
<tr>
<td>Name</td>
<td><input type="text" name="username" id="username" autocomplete="off" ></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" id="password" autocomplete="off" ></td>
</tr>
<tr>
<td>Email</td>
<td><input type="email" name="email" id="email" autocomplete="off"></td>
</tr>
<tr>
<td>Phone</td>
<td><input type="text" name="phone" id="phone" autocomplete="off" placeholder="001**********"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="register" id="register" value="register"></td>
</tr>
</table>
</form>

还有这个js代码

function reg(){
    var user = $("#username").val(),
        pass = $("#password").val(),
        city = $("#city").val(),
        email = $("#email").val(),
        phone = $("#phone").val();

    if(user.length<4){
        alert('short name');
        return false;
    }
    else if(pass.length<6) {
        alert('password error');
        return false;
    }
    else if(city.length<3) {
        alert('city error');
        return false;
    }
    else if(phone.length<6) {
        alert('phone error');
        return false;
    }
    else{
        $.post('ajax/checkex.php?user='+user+"&email="+email).done(function (data) {
            if(data.indexOf('user') !== -1){
                alert('user name is not available');
                return false;
            }
            else if(data.indexOf('email') !== -1){
                alert('email address is already registered');
                return false;
            }
            else if(data.indexOf('available') !== -1){
                return true;
            }
        });
      //return false;
    }
}

但是表单总是提交，ajax 代码根本不起作用。它甚至不会像alert(data) 那样提醒内部的任何东西。

即使之前已经注册了姓名和电子邮件，js代码也会返回true。

当我取消注释最后一个 return false 行时，它返回 false 并且 ajax 工作正常，但确保表单根本不提交。那么这段代码的错误在哪里呢？

Answer 1

这将始终发布表单。如果你想用 jquery 提交表单，你可以使用submit 事件。

您可以使用 event.preventDefault 方法来阻止表单提交。

一个简单的例子

$("myForm").submit(function(ev){
   ev.preventDefault();
   //Check if the inputs are valid
   if( formvalid ){
      $.ajax() //Make your ajax call 
   }
})

另见：Submit a form using jQuery

编辑：如果您的 ajax 调用返回 false，则不应提交

$("myForm").submit(function(ev){
  $.ajax({
    url: "url",
    type: "post",
    async: false, //To make the ajax call synchronous
    success: function(valid){
      if(!valid)
        ev.preventDefault();
    }
  }); 
})