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

实例:

 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. [旧][Android] Retrofit 源码分析之 Retrofit 对象

    备注 原发表于2016.04.27,资料已过时,仅作备份,谨慎参考 前言 在上一周学习了一下 Retrofit 的执行流程.接下来的文章要更为深入地学习 Retrofit 的各个类,这次我们先学习一下 ...

  2. 获明略科技B+轮战略投资,思迈特软件Smartbi用强产品思维推动BI生态完善

    今天,商业智能BI和大数据分析产品提供商思迈特软件(Smartbi)宣布完成亿级B+轮战略融资,本轮投资方为领先的全球企业级数据分析和组织智能服务平台提供商--明略科技. 此前,思迈特软件曾先后获得来 ...

  3. RESTful风格了解

    最近在学习springboot,一直听到一个词叫RESTful风格,今天找了一下书了解了一番.spring mvc除了支持json数据交互外,还支持RESTful风格 RESTful也称为REST(r ...

  4. java变量的初始化之后的默认值

    对于类的成员变量 不管程序有没有显示的初始化,Java  虚拟机都会先自动给它初始化为默认值. 1.整数类型(byte.short.int.long)的基本类型变量的默认值为0. 2.单精度浮点型(f ...

  5. vue--前端路由及vue-router两种模式

    前言 路由这个概念最早在后端出现,随后前后端分离,直至当今的单页面应用,路由也在一直发生变化.本文来总结一下路由变化和vue-router中的路由模式区别相关知识点. 正文 1.什么是前端路由 (1) ...

  6. 聊聊你对AQS的理解

    场景引入 面试官上来就一句,谈谈你对AQS的理解,大家心里可能收到了1W点伤害,AQS是什么,可能连全称都不知道,所以下面让我们聊聊AQS. 以ReentrantLock来介绍一下AQS 在java中 ...

  7. 多个n维向量围成的n维体积的大小

    前言 上周我们数学老师给了我们一道题,大意就是两个向量a和b,一个点M=$x*a+y*b$,x,y有范围,然后所有M组成的面积是一个定值,求x+y的最小值.当然这是道小水题,但我在想,如果把两个向量变 ...

  8. docker配置tomcat

    docker pull tomcat tomcat的目录结构 /usr/local/tomcat/webapps web目录 /usr/local/tomcat/logs 日志目录 /usr/loca ...

  9. 判断访问类型是pc端还是移动端

    /**      * 判断访问类型是电脑还是手机      */     $(function(){         var mobile_flag = isMobile(); // true为PC端 ...

  10. Qt:QVariant

    0.说明 QVariant可以表现出Qt数据类型中最普遍的行为. 一个QVariant对象中一次只保留一个type()的单个值(有的type()可以是多值的,例如StringList),可以用conv ...