表单事件，当用户与表单元素进行交互时发生。

实例：

 1 <!DOCTYPE html>

 2 <html>

 3     <head>

 4         <title>表单事件</title>

 5         <meta charset="UTF-8">

 6         <meta name="viewport" content="width=device-width, initial-scale=1.0">

 7     </head>

 8     <body>

 9         <form id ="myform" action="http://www.163.com/" method="get" >

10             用户名：<input type="text" id="username" name="username" >

11             <button type="submit">提交</button>

12         </form>

13

14         <script>

15             var myform = document.getElementById('myform');

16             myform.addEventListener('submit', stop, false);

17             function stop(e) {

18                 var username = document.getElementById('username');

19                 var str = username.value;

20                 if (str === '') {

21                     //要求输入内容

22                     alert("请输入用户名");

23                 } else {

24                     alert("输入的值是：" + str);

25                 }

26             }

27         </script>

28     </body>

29 </html>

JavaScript 表单事件的更多相关文章

  1. javascript中的常用表单事件用法

    下面介绍几种javascript中常用的表单事件: 一,onsubmit:表单中的确认按钮被点击时发生的事件,如下案例. 案例解析:弹出表单中提交的内容 <form name="tes ...

  2. 前端（十五）—— JavaScript事件：绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件

    JS事件:绑定事件方式.事件的冒泡和默认事件.鼠标事件.键盘事件.表单 事件.文档事件.图片事件.页面事件 一.事件的两种绑定方式 1.on事件绑定方式 document.onclick = func ...

  3. JavaScript表单处理（上）

    为了分担服务器处理表单的压力,JavaScript提供了一些解决方案,从而大大打破了处处依赖服务器的局面.  发文不易,转载请亲注明出处,谢谢! 一．表单介绍 在HTML中,表单是由<form& ...

  4. 第一百二十二节，JavaScript表单处理

    JavaScript表单处理 学习要点: 1.表单介绍 2.文本框脚本 3.选择框脚本 为了分担服务器处理表单的压力,JavaScript提供了一些解决方案,从而大大打破了处处依赖服务器的局面. 一． ...

  5. JavaScript表单验证和正则表达式

    JavaScript表单验证 分为四类: 1.非空验证 常用于用户名等 2.相等验证 常用于验证两次输入的密码 3.范围验证 常用于年龄等 4.正则验证 用于手机号,邮箱号等 以下是实例: <! ...

  6. JavaScript表单

    JavaScript表单 这篇文章的主要目的是介绍表单相关的知识,如表单基础知识.文本框脚本相关用法.选择框脚本相关用法以及等知识.虽然在现代web开发中,很少会使用form默认行为提交表单数据,而是 ...

  7. 15个最佳的 JavaScript 表单验证库

    客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...

  8. jQuery-3.事件篇---表单事件

    jQuery表单事件之blur与focus事件 在之前2.8与2.9节我们学过了表单处理事件focusin事件与focusout事件,同样用于处理表单焦点的事件还有blur与focus事件 它们之间的 ...

  9. JavaScript 表单验证 案例

    JavaScript 表单验证 案例 版权声明:未经授权,严禁转载!   编写 HTML 文件,搭建主体界面 <html> <head> <meta charset=&q ...

随机推荐

  1. Windows server 2012安装VM tools异常解决办法

    在VMWare虚拟机上安装Windows Server 2012之 后安装VMWare Tools时报如下错误信息: 问题:缺少KB2919355补丁 (先安装KB2919442,在安装KB29193 ...

  2. k8s初面考点ReplicaSet副本集极限9连击你懂了吗？

    k8s初面考点ReplicaSet副本集极限9连击你懂了吗? k8s考点灵魂拷问9连击 考点之简单描述一下k8s副本集ReplicaSet有什么作用? 考点之为什么ReplicaSet将取代Repli ...

  3. C# 开始支持动态化编程

    在.NET 4.0的运行时进行动态编程时,我们引入了一个新功能:动态语言运行时.可以这样理解,CLR的目的是为静态类型的编程语言提供一个统一的框架或编程模型,而DLR便是在.NET平台上为动态语言提供 ...

  4. Java基础--集合解析-ArrayList

    1.ArrayList中添加,获取,删除元素: 2.ArrayList中是否包含某个元素: 3.ArrayList中根据索引将元素数值改变(替换): 4.ArrayList中查看(判断)元素的索引: ...

  5. 查询性能提升3倍！Apache Hudi 查询优化了解下？

    从 Hudi 0.10.0版本开始,我们很高兴推出在数据库领域中称为 Z-Order 和 Hilbert 空间填充曲线的高级数据布局优化技术的支持. 1. 背景 Amazon EMR 团队最近发表了一 ...

  6. Python：numpy.ma模块

    翻译总结自:The numpy.ma module - NumPy v1.21 Manual 前言 ma是Mask的缩写,关于Mask的解释,如果有PS的基础,可以理解为蒙版,如果有计算机网络的基础, ...

  7. Java：Collections

    说明 工具类,提供了许多静态方法,用于操作集合. 模块:java.util.Collections 方法:全是static方法,使用时直接Collections.xxx( ... ) 返回值类型 方法 ...

  8. Python——条件语句及其循环

    条件语句及其循环 一. 条件语句 在条件语句中可以使用以下所有的运算符: 算术运算符:+.-.*././/.%.** 关系运算符:>.<.==.<=.>=.!= 测试运算符:i ...

  9. JZ-035-数组中的逆序对

    数组中的逆序对 题目描述 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数P.并将P对1000000007取模的结果输出. 即 ...

  10. Flutter的强制自我审查

    在<如何做好 Code Review>中我论述过代码审查对于保证代码品质的重要性,最近开始采用Git Hooks的方式为Flutter项目增加提交前的强制自我审查.这样做的好处在于将机械化 ...