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

实例:

 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. 超强可视化图表工具:Smartbi!!

    要制作出专业的可视化图表,还是需要一定的学习成本的,并且需要大量的时间.并且即使是制作出来,配色也是一大难题,对于一般人而言,通常会通过两种方式实现可视化大屏的制作: 1.写代码 大部分人可能会选择大 ...

  2. 【C# 异常处理】调试器 管理异常

    装载自:https://docs.microsoft.com/zh-cn/visualstudio/debugger/managing-exceptions-with-the-debugger?vie ...

  3. SevenZip.SevenZipLibraryException: Can not load 7-zip library or internal COM error! Message: failed to load library.

    SevenZip.SevenZipLibraryException: Can not load 7-zip library or internal COM error! Message: failed ...

  4. 华为HCIA认证零基础入门-网络工程师必备之什么是静态路由?如何配置静态路由?

    一.静态路由功能介绍:静态路由就是手工配置的路由,使得数据包能够按照预定的路径传送到指定的目标网络. 当不能通过动态路由协议学到一些目标网络的路由时,配置静态路由就会显得十分重要. 二.静态路由应用场 ...

  5. dopamine源码解析之dqn_agent

    目录 epsilon函数 DQNAgent构造函数核心参数 DQNAgent核心函数 tf.make_template 核心数据流图 epsilon函数 linearly_decaying_epsil ...

  6. Python文件读写--错误一

    在学习python的文件读写操作的时候,我遇到了一点麻烦事,觉得可以记录下来,先上代码吧. with open('test.txt') as file: file.write('test') prin ...

  7. 理解HMM算法

    长这样: 理解的前提: (1)状态:生成观测值的变量(上图中的"吃"和"睡"). (2)观测值:状态乘上输出概率对应的输出(上图中的橙色节点). (3)输出概率 ...

  8. 部署 Nginx +uwsgi+centos7+django+supervisor 项目

    部署CRM项目 前言 使用软件 nginx 使用nginx是为了它的反向代理功能,项目会通过Django+uWSGI+Nginx进行服务器线上部署. uWSGI python web服务器开发使用WS ...

  9. 网络IO模型 非阻塞IO模型

    网络IO模型 非阻塞IO模型 同步 一件事做完后再做另一件事情 异步 同时做多件事情 相对论 多线程 多进程 协程 异步的程序 宏观角度:异步 并发聊天 阻塞IO 阻塞IO的问题 一旦阻塞就不能做其他 ...

  10. 5月31日 python学习总结 JavaScript概述

    JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECM ...