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

实例：

 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. [Unity] 在软件标题栏显示工作路径

    (一)问题 项目开发中常会有开多个分支,同时启动多个 Unity 程序的情况,来回切换的时候就容易混淆,有时候还需要用 Show In Explorer 或者其他标志来确认当前使用的是哪个分支. 于是 ...

  2. DHCPv4协议测试——信而泰网络测试仪实操

    一.DHCP简介 1. DHCP原理 DHCPv4概述 上网最基本元素 · IP地址 · 子网掩码 · 缺省网关 · DNS服务器 DHCP概述-手工配置 为什么需要自动分配,手工配置不行吗? · 答 ...

  3. 二叉树的N中遍历方式和拓展应用

    (一)创建二叉树,如下图所示,一个标准的二叉树是所有位于根节点的左侧的子节点都是比根节点小的,右侧则都是大于根节点的. public class BinaryNode { public int val ...

  4. Shell编程四剑客包括：find、sed、grep、awk

    一.Shell编程四剑客之Find Find工具主要用于操作系统文件.目录的查找,其语法参数格式为: find path -option [ -print ] [ -exec -ok command ...

  5. 使用Oracle的PROFILE对用户资源限制和密码限制

    转至:https://blog.csdn.net/zhuomingwang/article/details/6444240?utm_medium=distribute.pc_relevant.none ...

  6. ORACLE SQL*PLUS 命令大全

    转至:https://www.cnblogs.com/kerrycode/archive/2011/06/09/2076248.html 其实网上已经有SQL*PLUS命令大全这方面的资料了,不过大都 ...

  7. net core or Linux

    某用户执行net core sdk 版本不生效 sudo chmod +x /home/username/netcore3.1sdk/dotnet //某个用户执行新版本net core sdk

  8. python面试_总结02_代码题

    - 代码题 1.创建一个函数,接收一个字符串参数,判断其做为Python标识符是否合法. 具体要求: 如果合法则输出 True,否则输出 False. 如果该字符串与Python内置的关键字,或Bif ...

  9. Python迭代器,生成器,装饰器

    迭代器 通常来讲从一个对象中依次取出数据,这个过程叫做遍历,这个手段称为迭代(重复执行某一段代码块,并将每一次迭代得到的结果作为下一次迭代的初始值). 可迭代对象(iterable):是指该对象可以被 ...

  10. IDEA 快捷键和字体设置

    IDEA的使用 一.IDEA 目录 IDEA的使用 一.IDEA 设置字体 文本字体设置 窗口字体设置 二.IDEA建立项目 三.IDEA快捷键 设置字体 点击File->Settings 文本 ...