javascript核心技术(二十四)事件类型(七)onsubmit onreset

[复制链接]
查看: 1392|回复: 31
发表于 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
javascript核心技术(二十四)事件类型(七)onsubmit onreset

大家可以动手测试一下以加深印象。
易博软件介绍

0

主题

6

帖子

3

积分

营销入门

Rank: 2

积分
3
发表于 2023-2-16 18:02:20 | 显示全部楼层
不错!  

0

主题

15

帖子

8

积分

营销入门

Rank: 2

积分
8
发表于 2023-3-3 01:06:49 | 显示全部楼层
真是让人受益非浅,真希望多看到有这样的文章。  也真希望大家能多帮助我,我只是一个初学者,这篇的文章让我的平静了下来。  本以为程序设计不是什么难事。、

0

主题

12

帖子

7

积分

营销入门

Rank: 2

积分
7
发表于 2023-3-13 03:35:39 | 显示全部楼层
如梦初醒!

0

主题

21

帖子

11

积分

营销入门

Rank: 2

积分
11
发表于 2023-3-23 05:12:01 | 显示全部楼层
很感谢楼主的分享,都是很有意义经验  

0

主题

15

帖子

8

积分

营销入门

Rank: 2

积分
8
发表于 2023-3-28 08:04:55 | 显示全部楼层
谢谢你们的留言 ,我看过深感领悟,想不到能在网上看到一些原本上书本看不到的东西。。。。

0

主题

30

帖子

16

积分

营销入门

Rank: 2

积分
16
发表于 2023-4-3 00:16:59 | 显示全部楼层
看你的文章,真的挺受益啊~~~  我以后一定要努力!

0

主题

24

帖子

13

积分

营销入门

Rank: 2

积分
13
发表于 2023-4-8 07:34:04 | 显示全部楼层
ding

0

主题

47

帖子

25

积分

终身会员

Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25

积分
25

终身会员

发表于 2023-4-13 01:24:38 | 显示全部楼层
verygood,我也想成为一名高手,希望各位指教指教,嘻嘻。

0

主题

9

帖子

5

积分

营销入门

Rank: 2

积分
5
发表于 2023-4-17 16:29:54 | 显示全部楼层
楼主的想法确实值得我们学习!!!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1、请认真发帖,禁止回复纯表情,纯数字等无意义的内容!帖子内容不要太简单!
2、提倡文明上网,净化网络环境!抵制低俗不良违法有害信息。
3、如果你对主帖作者的帖子不屑一顾的话,请勿回帖。谢谢合作!
3、问答求助区发帖求助后,如有其他用户热心帮您解决问题后,请自觉点击设为最佳答案按钮。

 
 
QQ在线客服
QQ技术支持
工作时间:
8:00-18:00
软著登字:
1361266号
官方微信扫一扫
weixin

QQ|小黑屋|慈众营销 ( 粤ICP备15049986号 )|网站地图

自动发帖软件 | 自动发帖器 | 营销推广软件 | 网络营销工具 | 网络营销软件 | 网站推广工具 | 网络推广软件 | 网络推广工具 | 网页推广软件 | 信息发布软件 | 网站推广工具 | 网页推广软件

Powered by Discuz! X3.4   © 2012-2020 Comsenz Inc.  慈众科技 - Collect from 深圳吉宝泰佛文化有限公司 公司地址:罗湖区黄贝街道深南东路集浩大厦A1403

返回顶部 返回列表