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

如果您有一个返回布尔值（true / false）的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
        });
    }
});

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

3 个答案: