Question

我的HTML页面包含#include <list> #include <vector> #include <string>，其中有两个部分用于输入文字（form和section1）。由于我想分别验证每个部分中的用户输入，因此我创建了section2来验证function1和section1以验证function2：

section2

我们的想法是，一旦用户点击var formIsValid = true; // global flag-variable to indicate form is valid function function1() { if (at least one field in section 1 has bad data) { formIsValid = false; return false; } else { formIsValid = true; return true; } } // function2 is identical, except that it validates section2 // unlike section1, section 2 only has one input field按钮，浏览器将首先验证submit，如果用户数据有效，请继续验证section1。如果在某个时刻某个section2 s中的数据不正确，那么浏览器会field该用户并让他输入缺失/无效alert的新值。

这是我的代码：

field

问题在于，每当检测到无效值时， 刷新整个页面，用户必须再次输入每个数据 。我的目标是验证页面没有刷新。换句话说，如果已成功验证任何一个部分function beginTest() { document.forms[0].onsubmit = function() { function1(); if (formIsValid == false) { function1(); return false; // supposed to prevent refreshing, but it does not } function2(); if (formIsValid == false) { function2(); return false; // again, problem with automatic page reloading } } }字段中输入的值，则必须保留在那里。

问：如何在验证过程中阻止浏览器刷新页面？

请，纯粹的JavaScript，没有JQuery。谢谢！

Answer 1

您需要使用event.preventDefault();。

示例：

function beginTest() {
   document.forms[0].onsubmit = function(event) {
      function1();
      if (formIsValid == false) {
         function1();
         event.preventDefault();
         return false; // supposed to prevent refreshing, but it does not
      }
[...]

Answer 2

你在寻找什么

window.onUnload = function() {var l = confirm("are u sure u want to leave");return l;}

当页面即将卸载并移动到另一个页面时触发。

如何在用户输入验证期间阻止页面刷新？使用form.onsubmit

2 个答案: