javascript核心技术（二十四）事件类型（七）onsubmit onreset

人亦已歌 · 发表于 2023-1-24 19:50:09

onsubmit 是在表单提交时触发
onreset 是在表单重置时触发
请看以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form id="f" action="https://www.teamczyx.com">
        姓名:<input type="text" name="" value=""> <br>
        <input type="submit" name="" value="提交">
        <input type="reset" name="" value="重置">
    </form>
    <script type="text/javascript">
        var d = document.getElementById('f');//获取form表单
        //当表单提交时触发
        d.onsubmit = function(){
            console.log('onsubmit触发了');
            return false;//当填写内容不对时，可以这样阻止表单的提交
        }
        //当表单重置时触发
        d.onreset = function(){
            console.log('onreset触发了');
        }
    </script>
</body>
</html>

javascript核心技术（二十四）事件类型（七）onsubmit onreset

以上，我们创建了一个简单的form表单，并给form的action属性赋值为https://www.teamczyx.com，即：提交到这里。
然后，我们获取form表单，并给form表单绑定了onsubmit和onreset事件。
当点击提交按钮时，onsubmit事件会触发。
当点击重置按钮时，onreset事件会触发。
另外，由于我们在onsubmit事件中使用了return false;所以并未发送网络请求。
在实际工作中，我们常常会先用js或正则验证表单内容是否符合要求，如果符合则提交，如果不符合则return false;

javascript核心技术（二十四）事件类型（七）onsubmit onreset