Javascript 尝试使用带有submitHandler的jquery表单验证程序提交表单

大家好，我正在玩jQuery表单验证程序，表单验证非常好，问题是当我单击submit时，页面会刷新，这不是我想要的目标。表单确实发布了数据，数据确实进入了我的数据库，这是一件好事

我的javascript文件

$().ready(function () {


$('#registerForm').validate({

    rules: {
        firstname: {
            required: true,
            nowhitespace: true,
            lettersonly: true,
        },
        surname: "required",
        password: {
            required: true,
            minlength: 5,
            maxlength: 10
        },
        confirm_password: {
            required: true,
            minlength: 5,
            equalTo: "#password1",
        },
        email: {
            nowhitespace: true,
        }

    },

    messages: {
        firstname: {
            required: 'Please enter a name',
        },
        surname: {
            required: 'Please enter a surname',
        },
        email: {
            required: 'Please enter an email address',
            email: 'Please enter a <em>valid</em> email'
        },
        password: {
            required: 'Please provide a password',

        },
        confirm_password: {
            required: 'Please confirm your password',

        }

    },

    errorElement: 'ul',
    errorPlacement: function (error, element) {
        let placement = $(element).data('error');
        if (placement) {
            $(placement).append(error)
        } else {
            error.insertAfter(element);
        }
    },

    submitHandler: function () {

        postContent();
    },

});

function postContent() {

    $('#registerForm').on('submit',function () {

        let that = $(this),
            url = that.attr('action'),
            type = that.attr('method'),
            data = {};
        that.find('[name]').each(function (index, value) {
            let that = $(this),
                name = that.attr('name'),
                value = that.val();

            data['name'] = value;
        });

        $.ajax({
            url: url,
            type: type,
            data: data,
            success: function (response) {
                console.log(response);
            }

        });

        return false;
    });
}

$（）.ready（函数（）{
$（'#registerForm'）。验证({
规则：{
名字：{
要求：正确，
没错，
信一：没错，
},
姓：“必选”，
密码：{
要求：正确，
最小长度：5，
最大长度：10
},
确认密码：{
要求：正确，
最小长度：5，
equalTo:#密码1“，
},
电邮：{
没错，
}
},
信息：{
名字：{
必填项：“请输入名称”，
},
姓：{
必填项：“请输入姓氏”，
},
电邮：{
必填项：“请输入电子邮件地址”，
电子邮件：“请输入有效的电子邮件”
},
密码：{
必需：“请提供密码”，
},
确认密码：{
必填项：“请确认您的密码”，
}
},
errorElement:'ul'，
errorPlacement:函数（错误，元素）{
let placement=$（元素）.data（'error'）；
如果（安置）{
$（位置）.append（错误）
}否则{
错误。插入符（元素）；
}
},
submitHandler:函数（）{
后内容（）；
},
});
函数后内容（）{
$（'#registerForm'）。在（'submit'，函数（）{
让它=$（这个），
url=that.attr（'action'），
type=that.attr（'method'），
数据={}；
that.find（'[name]'）。每个（函数（索引，值）{
让它=$（这个），
name=that.attr（'name'），
value=that.val（）；
数据['name']=值；
});
$.ajax({
url:url，
类型：类型，
数据：数据，
成功：功能（响应）{
控制台日志（响应）；
}
});
返回false；
});
}

以及html表单本身

<div id="registerModal" class="modal">
<div class="modal-content">

    <h4 class="center container">Register</h4>
    <div class="center" id="error-list">
        <ul id="required"></ul>
        <ul id="password"></ul>
        <ul id="passwordShort"></ul>
    </div>
    <div class="row center">
        <form class="col s12" action="account.php" method="post" id="registerForm" novalidate="novalidate">
            <div class="row">
                <div class="input-field col s12 l6">
                    <input id="first_name" type="text" class="validate" name="firstname" required>
                    <label for="first_name">First Name *</label>
                </div>
                <div class="input-field col s12 l6">
                    <input id="last_name" type="text" class="validate" name="surname" required>
                    <label for="last_name">Last Name *</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12">
                    <input id="email" type="email" class="validate" name="email" required/>
                    <label for="email">Email *</label>
                </div>
            </div>

            <div class="row">
                <div class="input-field col s12">
                    <input id="password1" type="password" class="validate" name="password" required/>
                    <label for="password">Password *</label>
                    <ul id="passError"></ul>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12">
                    <input id="confirm_password" type="password" class="validate" name="confirm_password" required/>
                    <label for="email">Confirm Password *</label>
                </div>
            </div>
            <button class="btn waves-effect waves-light" id="register" name="register" type="submit">Register
                <i class="material-icons right">send</i>
            </button>
            <span>  </span>
        </form>
    </div>

</div>
<div class="modal-footer">
</div>

登记



名字*
姓*
电子邮件*
密码*

确认密码*
登记
发送

---

要停止表单提交刷新页面的默认行为，您需要添加以下内容

$('#registerForm').on('submit',function (e) {
    e.preventDefault();
...

另一种方法是使用“return false；”，它可以防止默认事件发生，也可以阻止事件传播

$('#registerForm').on('submit',function (e) {
    return false;
...

---

要停止表单提交刷新页面的默认行为，您需要添加以下内容

$('#registerForm').on('submit',function (e) {
    e.preventDefault();
...

另一种方法是使用“return false；”，它可以防止默认事件发生，也可以阻止事件传播

$('#registerForm').on('submit',function (e) {
    return false;
...

---

您的

register

按钮具有导致浏览器执行导航的属性

type=“submit”

。因此您建议将其更改为type=“button”？不。我没有任何建议。我只是通知您观察到的行为的原因。您的

register

按钮具有属性

type=“submit”

这会导致浏览器执行导航。因此建议将其更改为type=“button”没有。我没有提出任何建议。我只是告诉你你观察到的行为的原因。我已经尝试过了！但没有改变。马特还有什么问题。这真的让我很沮丧。我添加了一个替代解决方案，是否会给你带来虚假的效果？我已经尝试过了！但没有改变。马特还有什么问题。是吗ally让我很沮丧。我添加了另一个解决方案，返回的结果对你来说是错误的吗？