js阻止表单提交的两种方法

最新推荐文章于 2020-02-18 22:53:12 发布

weixin_30411997

最新推荐文章于 2020-02-18 22:53:12 发布

阅读量94

点赞数

原文链接：http://www.cnblogs.com/daocoder/p/6375289.html

版权

下面直接看代码。
~~~

<!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标签下属性οnsubmit="return checkLength()"或 id="submit"的input标签下添加属性οnclick="return checkLength()"

上面的代码是两种方法的集合，可自己删减。

转载于:https://www.cnblogs.com/daocoder/p/6375289.html

weixin_30411997

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js阻止表单提交的两种方法

下面直接看代码。~~~<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> function checkLength(){ ...
复制链接

扫一扫