JavaScript会重新加载整个页面

JavaScript reloads the complete page

本文关键字：加载 新加载 JavaScript      更新时间：2024-01-05

我正在使用以下脚本验证注册表：

$(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>

可能是您的#注册是一个提交按钮，表单正在发布

在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>

这是小提琴

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

单击按钮时，它会执行该按钮的默认操作。由于您的按钮类型为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
}

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

您需要在点击事件结束时返回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
});
});
相关文章：