javascript/jQuery 在不实际使用 javascript/jQuery 提交函数时阻止表单提交答案

【问题标题】：javascript/jQuery prevent form submission when not actually using a javascript/jQuery submit functionjavascript/jQuery 在不实际使用 javascript/jQuery 提交函数时阻止表单提交
【发布时间】：2013-10-26 04:34:40
【问题描述】：

我有一个使用<form action="" method="post"> 提交给自身的PHP 页面。我正在进行一些 jQuery 字段验证，如果验证未通过，我想阻止表单提交。但是，即使验证未通过，它也会继续提交。

我错过了什么？为了防止提交，我是否需要实际使用带有 jQuery .submit() 函数的按钮（而不是提交）？（这里是fiddle）

<form action="" method="POST">
    <label for="email">Username: <br />
    <input id="email" name="email" class="phPasswordTxtInputField" type="text" size="33" value=""><br />

    <label for="tmp_password">Temp password:<br />
    <input id="tmp_password" name="tmp_password" type="password"  minlength="5" value="" default="" size="33" caption=""><br />

    <label for="new_password">New password:<br />
    <input id="new_password" name="new_password" type="password"  minlength="5" value="" default="" size="33" caption=""><br />

    <label for="verify_password">Confirm password:<br />
    <input id="verify_password" name="verify_password" type="password"  minlength="5" value="" default="" size="33" caption=""><br />

    <div style="margin: 0px 0px 0px 160px;" id="lblConfirmPasswordMessage"></div>
    <input type="submit" id="submit_password" value="Reset Password" />
</form>

<script>
    function checkPasswordVerify(p,c,objId) {
        if(p != c) {
            var el =  $(objId);
            $(objId).html('<span class="passwordStrength">Please make sure the password and confirmation match.</span>');
            return false;
        }
        return true;
    }

    $('#submit_password').click(function() {
        checkPasswordVerify($(this).val(), $('#new_password').val(), '#lblConfirmPasswordMessage');
    });  
</script>

【问题讨论】：

标签： jquery forms form-submit

【解决方案1】：

您的点击处理程序中需要一个return 语句：

$('#submit_password').click(function() {
    return checkPasswordVerify($(this).val(), $('#new_password').val(), '#lblConfirmPasswordMessage');
});

此外，最好在表单的submit 处理程序中执行此操作，而不是在提交按钮的click 处理程序中。无需点击提交按钮即可提交表单。

【讨论】：

确认。我知道这很简单。谢谢。
别担心，你不是第一个，也不会是最后一个。

【解决方案2】：

您实际上并没有做任何返回值为checkPasswordVerify 的事情。你可能想要更多类似的东西：

$('#submit_password').click(function() {
    return checkPasswordVerify($(this).val(), $('#new_password').val(), '#lblConfirmPasswordMessage');
});

或者：

$('#submit_password').click(function(e) {
    if(!checkPasswordVerify($(this).val(), $('#new_password').val(), '#lblConfirmPasswordMessage'))
       e.preventDefault();
});

【讨论】：