如何用js禁止刷新页面再次提交表单

代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            function checkLength(){
                var name=document.getElementById('user').value;
                if(name.length<5){ console.log(name);
                    return false;
                    }else{
                       return true;
                    }
        }
            window.onload=function(){
            var mysubmit=document.getElementById('submit');
            mysubmit.onclick=function(event){
               var name=document.getElementById('user').value;
               if(name.length<5){ event.preventDefault(); }
               else{ }
                   }
            }
    </script>
    </head>
<body>
   <form action="clock.html" method="post" onsubmit="return checkLength()">
       <p>name:<input type="text" name="user" id="user"></p>
       <input type="submit" id="submit" name="submit">
   </form>
</body>
</html>

clock.html是我自己的一个时钟页面。

先看第一种方法：利用event的阻止默认事件机制，页面载入之后获得submit元素，然后为submit注册click响应函数，参数为event事件。

在用户点击submit触发响应函数后，直接event.preventDefault();阻止表单转跳的默认事件。

第二种方法：在表单form标签下属性onsubmit="return checkLength()"或 id="submit"的input标签下添加属性onclick="return checkLength()"

上面的代码是两种方法的集合，可自己删减。当然还有其他的方式，自己思考

又找到一个更好的方式部分代码如下

如何用js禁止刷新页面再次提交表单

猜你喜欢