Javascript 我怎样才能避免在表单提交时重新加载页面，并显示一个小文本，上面写着“提交”；“成功注册”；

我试图阻止页面重新加载，我想在提交表单时在表单的某个地方显示一条小消息，上面写着“成功注册”。我可以通过返回false来实现这一点，但是用户的输入不会发布到我的数据库中

先谢谢你

这是我的密码：

        <script>

    function validate(form) {
        fail  = validateName(form.name.value)
        fail += validateEmail(form.email.value)
        fail += validateCity(form.city.value)
        if (fail == "") { 
   alert("You have been successfully registered."); return true }
        else { 
   document.getElementById('errors').innerHTML = fail;}
   return false
}

        function validateName(field) {
            if (field == "") return "No name was entered.<br/>"
            else if (field.length < 3) return "Name must be at least 3 characters.<br/>"
            else if (!/[a-zA-Z ]/.test(field)) return "Name can only have alphabetical characters.<br/>"
            return ""
            }
        function validateEmail(field) {
            if (field == "") return "No email was entered.<br/>"
            else if (!((field.indexOf(".") > 0) && (field.indexOf("@") > 0)) || /[^a-zA-Z0-9.@_-]/.test(field)) return "The email address is invalid.<br/>"
            return ""
            }
        function validateCity(field) {
            if (field == "") return "No city was entered.<br/>"
            else if (field.length < 3) return "City must be at least 3 characters.<br/>"
            else if (!/[a-zA-Z ]*$/.test(field)) return "City can only have alphabetical characters.<br/>"
            return ""
            }

    </script>


<form action="<?php echo $editFormAction; ?>" name="subscribe" onSubmit="return validate(this)" id="subscribe" method="POST" autocomplete="off">
<div id="errors"></div>
<input name="name" required pattern="[a-zA-Z ]*$" title="Please enter only alphabetic characters" type="text" id="name" placeholder="Your name"/>


<input name="email" required id="email" type="email" title="Please enter your email address" placeholder="Your email address"/>

<input name="city" required pattern="[a-zA-Z ]*$" title="Please enter only alphabetic characters" id="city" placeholder="Your city"/>

<div id="buttons">
            <input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset">

            <input type="submit" name="submit" id="submitbtn" class="submitbtn" tabindex="7" value="Submit this!">

            <br style="clear:both;">
        </div>
<input type="hidden" name="MM_insert" value="subscribe">
  </form>

函数验证（表单）{
fail=validateName（form.name.value）
fail+=validateEmail（form.email.value）
fail+=validateCity（form.city.value）
如果（失败==“”）{
警报（“您已成功注册。”）；返回true}
否则{
document.getElementById（'errors'）。innerHTML=fail；}
返回错误
}
函数validateName（字段）{
if（field==“”）return“未输入名称。
”
else if（field.length<3）return“名称必须至少包含3个字符。
”
else if（！/[a-zA-Z]/.test（field））返回“名称只能包含字母字符。
”
返回“”
}
函数validateEmail（字段）{
如果（字段==“”）返回“未输入电子邮件。
”
否则如果（！（（field.indexOf（“.”>0）和（field.indexOf（“@”）>0））| |/[^a-zA-Z0-9.@-]/.test（field））返回“电子邮件地址无效。
”
返回“”
}
函数有效性（字段）{
如果（字段=“”）返回“未输入任何城市。

else if（field.length<3）返回“城市必须至少包含3个字符。
”
否则如果（！/[a-zA-Z]*$/.test（field））返回“城市只能有字母字符。
”
返回“”
}
提交
表单时
可以使用
AJAX
并返回
false

在
AJAX
中，您可以将所有
form
值传递到服务器
script

这就是你必须要做的

<form id="formID" onsubmit="return mformPost('your_php_action.php', '#formID');">
    <input type="text" name="test" id="test" value=""/>
</form>

提交
表单时
可以使用
AJAX
并返回
false

在
AJAX
中，您可以将所有
form
值传递到服务器
script

这就是你必须要做的

<form id="formID" onsubmit="return mformPost('your_php_action.php', '#formID');">
    <input type="text" name="test" id="test" value=""/>
</form>

如果不想重新加载页面，不要使用带有提交操作的表单——而是使用AJAX将数据发送到单独的PHP脚本，并让浏览器在回调函数中启动通知或弹出窗口

与：

$（“#submitbtn”）。单击（函数（）{
$.post（“yourphpscript.php”，{name:$（“#name”）.val（），email:$（“#email”）.val（），city:$（“#city”）.val（），
函数（）{
美元（“#submitbtn”）。在（“成功注册。
”）之后；
});
});
如果不想重新加载页面，不要使用带有提交操作的表单——而是使用AJAX将数据发送到单独的PHP脚本，并让浏览器在回调函数中启动通知或弹出窗口

与：

$（“#submitbtn”）。单击（函数（）{
$.post（“yourphpscript.php”，{name:$（“#name”）.val（），email:$（“#email”）.val（），city:$（“#city”）.val（），
函数（）{
美元（“#submitbtn”）。在（“成功注册。
”）之后；
});
});
正如前面的海报所指出的，您应该编写一个Ajax函数来异步提交表单。表单处理程序将返回一条消息，该消息可以附加到页面上的div中。以下是一个例子：

$(function() {

    $('#submitbtn').click(function(event) {
        event.preventDefault();
        var form = $(this).closest('form'),
            action = form.attr('action');
        $.post(action, form.serialize(), function(data) {
            $('#form-message').html(data);
        })
    });

}); 

根据OP的回复更新：

我发布的代码只是一个如何使用Ajax的示例，而不是一个完整的解决方案。为了使它成为一个完整的解决方案，您可以将您的原始代码与我发布的代码结合起来，这样表单提交只会在表单通过验证例程时触发。验证例程将出现在event.preventDefault（）之后，这将阻止表单立即提交

我将为您的错误消息创建一个数组。每次缺少必填字段时，都可以向数组中添加一个错误。在验证例程结束时，您可以检查阵列的大小。如果它是空的，意味着没有错误，您将提交表单。如果它包含一个或多个错误，您将不会提交表单。相反，您可以将错误打印到屏幕上

我的代码示例建议后端表单处理程序返回包含要显示给用户的状态消息的数据。例如，“谢谢注册！”或“哎呀，出问题了！请再试一次。”状态消息将附加到一个ID为“form message”的div中。为了创建该功能，您必须向后端表单处理程序添加return语句，并向标记添加类似的div元素
 正如前面的海报所指出的，您应该编写一个Ajax函数来异步提交表单。表单处理程序将返回一条消息，该消息可以附加到页面上的div中。以下是一个例子：

$(function() {

    $('#submitbtn').click(function(event) {
        event.preventDefault();
        var form = $(this).closest('form'),
            action = form.attr('action');
        $.post(action, form.serialize(), function(data) {
            $('#form-message').html(data);
        })
    });

}); 

根据OP的回复更新：

我发布的代码只是一个如何使用Ajax的示例，而不是一个完整的解决方案。为了使它成为一个完整的解决方案，您可以将您的原始代码与我发布的代码结合起来，这样表单提交只会在表单通过验证例程时触发。验证例程将出现在event.preventDefault（）之后，这将阻止表单立即提交

我将为您的错误消息创建一个数组。每次缺少必填字段时，都可以向数组中添加一个错误。在验证例程结束时，您可以检查阵列的大小。如果它是空的，意味着没有错误，您将提交表单。如果它包含一个或多个错误，您将不会提交表单。相反，您可以将错误打印到屏幕上

我的代码示例建议后端表单处理程序返回包含要显示给用户的状态消息的数据。例如“谢谢注册！”或“哎呀，有些东西坏了”