JS中onsubmit禁止提交表单的三种方式

前面我在博客中写过onblur实现失焦调用函数的三种方式, onsubmit也几乎一模一样, 不过昨天我在写一个表单提交页面,判断某些必填项未填写则禁止提交, 我们知道onsubmit是否提交取决于它的值,true则提交,false则禁止提交; 当在调用判断函数时返回值为false却也提交了…于是我查了资料,并把JS触发事件研究了一下,总结如下:

第一种方式

匿名函数直接调用

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<form action="https://www.baidu.com" id="issubmit">
    <input type="text" name="user">
    <input type="submit" value="提交">

</form>
<script>
    document.getElementById("issubmit").onsubmit=function(ev) {//匿名函数直接调用
        return false;
    }


</script>


</body>
</html>

实际上, 有名函数也可以直接调用,如:

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<form action="https://www.baidu.com" id="issubmit">
    <input type="text" name="user">
    <input type="submit" value="提交">

</form>
<script>
    document.getElementById("issubmit").onsubmit=function fun(ev) {//有名函数也可以被直接调用, 另外几个JS触发事件也或许适用
        return false;
    }


</script>


</body>
</html>

第二种方式

先声明函数,再调用函数

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<form action="https://www.baidu.com" id="issubmit">
    <input type="text" name="user">
    <input type="submit" value="提交">

</form>
<script>
    document.getElementById("issubmit").onsubmit=fun;//调用函数
    
        function fun(ev) {//声明函数
        return false;
    }


</script>


</body>
</html>

先声明函数,再调用函数实现没问题,可是如果匿名函数返回用一个变量接收,看起来这个变量像一个对象(Js中很多对象不要new就可以使用), 其实它就只是一个变量,比如这样写就不行:

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<form action="https://www.baidu.com" id="issubmit">
    <input type="text" name="user">
    <input type="submit" value="提交">

</form>
<script>
    document.getElementById("issubmit").onsubmit=fun;//调用,可是这是变量,而不是对象
        var fun=function(ev) {//赋值给变量
        return false;
    }


</script>


</body>
</html>

第三种方式

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<form action="https://www.baidu.com" id="issubmit" onsubmit="return fun()">//调用方法前面一定要加 return
    <input type="text" name="user">
    <input type="submit" value="提交">

</form>
<script>

        function fun(ev) {
        return false;
    }


</script>


</body>
</html>

这种方式在标签上调用函数, 因为onsubmit要接收一个Boolean值, 在onblur那篇博客我讲过, js中’=’ 相当于java中的’.’ 调用的意思, 因此只写’='onsubmit无法获取Boolean值, 也许你会问为什么第一二种不用return, 那是因为第一二种onsubmit是直接在JS代码块内调用,而第三种是在标签内调用,第三种onsubmit相当于标签的一个属性, 反正我是强行解释…

JS中onsubmit禁止提交表单的三种方式