jQuery/PHP的：如何阻止提交HTML表單？

Question

如何使用jQuery驗證用戶名和密碼，然後相應地進行處理？

這裏是我的形式：

<form action="registration_form.php" method="post" name="register_form"> 
    <label>Email</label> 
    <input type="email" placeholder="Enter your email..." name="email" required="required"/> 
    <br> 
    <label>Password</label> 
    <input id="pwd" type="password" placeholder="Enter your password..." name="pwd" required="required"/> 
    <br> 
    <label>Re-enter Password</label> 
    <input id="re_pwd" type="password" placeholder="Renter your password..." name="re_pwd" required="required"/> 
    <br> 
    <button>register</button> 
</form> 

Answer 1

你可以把一個的onsubmit的形式標記，並有一個JavaScript函數返回false，如果它沒有通過驗證，但記得要始終在後端驗證以及前端

<form action="registration_form.php" method="post" name="register_form" onsubmit="return validate();"> 
     <label>Email</label> 
     <input type="email" placeholder="Enter your email..." name="email" required="required"/> 
     <br> 
     <label>Password</label> 
     <input id="pwd" type="password" placeholder="Enter your password..." name="pwd" required="required"/> 
     <br> 
     <label>Re-enter Password</label> 
     <input id="re_pwd" type="password" placeholder="Renter your password..." name="re_pwd" required="required"/> 
     <br> 
     <button>register</button> 
    </form> 

<script> 
function validate(){ 
    if(your validation passes){ 
    return true; 
    }else{ 
    return false; 
    } 
} 
</script> 

Answer 2

<form action="registration_form.php" method="post" name="register_form" onsubmit="return validateForm()"> 

如果你有一個JavaScript函數validateForm返回一個布爾值（真/假）值，與此更換你的第一行，如果只提交表單它通過測試。

Answer 3

即使雖然你已經接受了答案，但你可以這樣做：http://jsfiddle.net/LVzry/1/

這並不完美，但它應該指向正確的方向。

$("#submit").click(function() { 
    if ($('span.error').length > 0) { 
     alert('Please fix the form errors before submitting'); 


    } else if ($("#pwd").val() !== $("#re_pwd").val()) { 
     alert("Your passwords are not the same"); 

    } else if ($("#pwd").val() === "" || $("input[type='email']").val() === "") { 
     alert("please enter name and password"); 



    } else if (!emailReg.test($("input[type='email']").val()) || !passReg.test($("input[type='pwd']").val())) { 
     alert("Make sure that your name and password are properly formatted."); 
     $("input[type='pwd']").after('<span class="error">Form Error</span>'); 


    } else { 
     $.post("registration_form.php", $('form').serialize(), function() { // post form data 
      //do something after submission 
     }); 
    } 
});