表单事件

最新推荐文章于 2022-11-19 10:28:43 发布

HaahLeel

最新推荐文章于 2022-11-19 10:28:43 发布

阅读量470

点赞数

CC 4.0 BY-SA版权

分类专栏： miaov 笔记

本文链接：https://blog.youkuaiyun.com/NewStart_lh/article/details/46933655

miaov 笔记专栏收录该内容

21 篇文章

订阅专栏

本文深入解析JSform表单的提交事件onsubmit和重置事件onreset，通过实例代码演示如何实现表单的有效提交和安全重置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS form表单有两个事件：
1.表单提交事件 onsubmit
2.表单重置事件 onreset

html部分代码

<form action="http://www.baidu.com" id="form1">
    <input type="text" name="text1"/>
    <input type="text" name="text2"/>
    <input type="submit" name="doSubmit"/>
    <input type="reset" name="doReset"/>
</form>

1.表单提交事件（也可以通过submit（）进行提交）

var oForm = document.getElementById("form1");
    oForm.onsubmit = function(){
        //判断文本框内是否有值，如果没有不进行提交
        if(this.text1.value == '' || this.text2.value == ''){
            alert("请输入内容");
            return false
        }
         return true;
     }

2.表单重置事件

oForm.onreset = function(){
//confirm()是一个带有“确定”和“取消”按钮的对话框，并有返回值true or false
    var bool = confirm("确定要重置？")
    if(bool) return true;
    return false;
}

由于confirm()的返回值是一个boolean值，所以可以直接写成

oForm.onreset = function(){
    return confirm("确定要重置？");
}