Question

我使用以下脚本来验证注册表单：

$(document).ready(function() {
    $("#register").click(function() {
        var name = $("#name").val();

        var email = $("#email").val();

        var password = $("#password").val();

        var cpassword = $("#cpassword").val();

        if (name == '' || email == '' || password == '' || cpassword == '') {
            alert("Please fill all fields...!!!!!!");
        } else if ((password.length) < 8) {
            alert("Password should at least 8 character in length...!!!!!!");
        } else if (!(password).match(cpassword)) {
            alert("Your passwords don't match. Try again?");
        } else {
            $.post("register.php", {
                name1: name,
                email1: email,
                password1: password
            }, function(data) {
                if (data == 'You have Successfully Registered.....') {

                    alert("Tu cuenta de usuario ha sido creada");

                }

            });
        }
    });
});

我正在检查所有可能的选项，并且我检测到条件正在运行，但是在满足一个条件后页面会重新加载，而不是停止执行脚本。例如，如果密码长度为6个字符，则警告：

alert("Password should at least 8 character in length...!!!!!!");

被抛出，但页面再次重新加载，输入字段中的所有文本都被删除......

并且当执行$ .post调用并且响应是预期时，警报：

alert("Tu cuenta de usuario ha sido creada");

未显示。记录在数据库中创建，页面重新加载，但不显示警报。

修改

这是表单的html部分：

<div class="form-bottom">
                                <form role="form" method="post" action="#" class="login-form" id="login_form">
                                    <div class="form-group">
                                        <label class="sr-only" for="form-username">Usuario</label>
                                        <input type="text" name="dname" placeholder="Usuario..." class="form-username form-control" id="name">
                                    </div>
                                    <div class="form-group">
                                        <label class="sr-only" for="form-email">Email</label>
                                        <input type="text" name="email" placeholder="Email..." class="form-email form-control" id="email">
                                    </div>

                                    <div class="form-group">
                                        <label class="sr-only" for="form-password">Contraseña</label>
                                        <input type="password" name="password" placeholder="Contraseña..." class="form-password form-control" id="password">
                                    </div>
                                    <div class="form-group">
                                        <label class="sr-only" for="form-confirm-password">Confirmar Contraseña</label>
                                        <input type="password" name="cpassword" placeholder="Confirmar Contraseña..." class="form-password form-control" id="cpassword">
                                    </div><br>
                                    <button type="submit" name="register" id="register" class="btn">Crear cuenta de usuario</button>


                                </form>

Answer 1

可能是您的#register是提交按钮，表单正在发布

Answer 2

单击该按钮时，它会执行该按钮的默认操作。由于您的按钮的类型为submit，因此默认操作是提交表单。这是您在应用程序中看到的内容 - 运行脚本，然后提交表单。

为了防止您需要在事件对象上使用方法preventDefault：

$("#register").click(function(e) {    // <- pass event object as first parameter
    e.preventDefault();   // <- call preventDefault to prevents form from submitting
    var name = $("#name").val();
    // the rest of your code
}

调用此方法时，不会触发事件的默认操作。在您的情况下，这意味着不会提交表单，您的代码应该正常工作。

Answer 3

您需要在点击事件结束时返回false

$(document).ready(function() {
$("#register").click(function() {
    var name = $("#name").val();

    var email = $("#email").val();

    var password = $("#password").val();

    var cpassword = $("#cpassword").val();

    if (name == '' || email == '' || password == '' || cpassword == '') {
        alert("Please fill all fields...!!!!!!");
    } else if ((password.length) < 8) {
        alert("Password should at least 8 character in length...!!!!!!");
    } else if (!(password).match(cpassword)) {
        alert("Your passwords don't match. Try again?");
    } else {
        $.post("register.php", {
            name1: name,
            email1: email,
            password1: password
        }, function(data) {
            if (data == 'You have Successfully Registered.....') {

                alert("Tu cuenta de usuario ha sido creada");

            }

        });
    }
    return false;  // put this it will solve your problem
});
});

Answer 4

在HTML表单中更改以下按钮代码

  <button type="submit" name="register" id="register" class="btn">Crear cuenta de usuario</button>

到

 <button type="button" name="register" id="register" class="btn">Crear cuenta de usuario</button>

以下是fiddle

唯一改变的是按钮的类型。

JavaScript重新加载整个页面

4 个答案: