JavaScript重新加载整个页面

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>

这是小提琴

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