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

实例：

 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. 业务人员可以进行自助ETL操作？这款BI工具你值得拥有

    ​ETL是什么? ETL,是英文 Extract-Transform-Load 的缩写,用来描述将数据从来源端经过抽取(extract).转换(transform).加载(load)至目的端的过程.E ...

  2. 怎样快速对二进制和十进制进行互转化——IP地址规划与设计总结

    转至:https://blog.csdn.net/erlian1992/article/details/47342189 最近一直在看全国计算机三级网络技术这本书,看到第二章的时候,不免会遇到计算机中 ...

  3. Oracle 11g RAC运维总结

    转至:https://blog.csdn.net/qq_41944882/article/details/103560879 1 术语解释1.1 高可用(HA)什么是高可用?顾名思义我们能轻松地理解是 ...

  4. [炼丹术]DeepLabv3+训练模型学习总结

    DeepLabv3+训练模型学习总结 一.DeepLabs3+介绍 DeepLabv3是一种语义分割架构,它在DeepLabv2的基础上进行了一些修改.为了处理在多个尺度上分割对象的问题,设计了在级联 ...

  5. kibana实现条件查询和修改

    GET jyb_report_index_preprod/_search { "query": { "match": { "report_id&quo ...

  6. springboot----二、Hello,SpringBoot！

    二.Hello,SpringBoot! 2.1.环境搭建 java version 1.8 maven springboot 最新版 开发工具:idea 2.2.创建基础项目说明 Spring官方提供 ...

  7. Git拉取远程仓库代码并更新本地仓库

    1.git pull:获取最新代码到本地,并自动合并到当前分支 //查询当前远程分支 $ git remote -v //直接拉取并合并最新代码 $ git pull origin master [示 ...

  8. think php 登录 （session+验证码）

    ..........表单页面 <!DOCTYPE html> {__NOLAYOUT__} <html lang="en"> <head> &l ...

  9. vue3-组件中使用setup函数获取vuex中的数据的新方式

    传统方式 setup() { const store = useStore() //传统方式 const aName = computed(() => store.state.name) ret ...

  10. 关于BFS

    嗨,又是躺平的一天呢 下文有很多未经版权允许而私自转载,不喜勿喷 今天我来整理亿下关于 BFS 这个"高级"的东西: 首先,我不得不提亿句 关于队列 是个啥 队列(queue)是一 ...