表单结构如下所示:

  <form >
    <input type="text" name="txt" id="txt" value="" />
    <input type="submit" name="sub" id="sub" value="提交" />
    <input type="button" value="点击" name="button"/>
    <input type="button" value="重置" name="resets"/>
    <input type="reset" name="resets1" id="" value="重置" />
  </form>
<script type="text/javascript">
var form=document.getElementsByTagName('form')[0];
/*当每次在输入框中输入内容时都会触发oninput事件*/
  form.txt.oninput=function(){
    console.log(this.value);
  }
/*当在输入框中输入内容时,并不会马上触发onchange事件,而是当输入框失去焦点时就会触发onchange事件*/
  form.txt.onchange=function(){
    console.log(this.value);
  }
/*在这里,onsubmit事件是form底下的一个事件,不是在submit按钮上,点击之前触发onsubmit事件,
因此可以有判断条件来限制输入框里面的内容,*/
    form.onsubmit=function(ev){
     ev.preventDefault();
     if(!form.txt.value){
      alert('请输入内容');
      };
  }
/*当使用submit提交按钮时,输入框的值和提交value值会在导航栏当中显示出来。显示在hash值当中,name=vale&name=value;
但是当按钮是button时,显示在地址栏中的只有txt的name=value,不会把button中的name和value值显示出去
submit()不会触发onsubmit事件,所以要先做验证,再用submit()方法提交*/
  form.button.onclick=function(){
    form.txt.value?form.submit():alert('请输入内容');
  }
//重置表单
  form.resets.onclick=function(){
    form.reset();
  }
//重置表单的第二种方式
form.resets1=function(){

}

关于js中的表单事件的更多相关文章

  1. 测试开发之前端——No5.HTML5中的表单事件

    表单事件 由 HTML 表单内部的动作触发的事件. 适用于所有 HTML 5 元素,不过最常用于表单元素中: 属性 值 描述 onblur script 当元素失去焦点时运行脚本 onchange s ...

  2. JS中的表单验证+正则表达式

    表单验证+正则表达式 一.非空验证 trim:去空格(去掉前后的空格),任何字符串都可以用这个方法.写法为:if(v.trim().length==0),表示如果去掉空格后的字符串的长度为0. < ...

  3. vue.js中的表单radio,select,textarea的v-model属性的用法

    只要是表单元素,其值已经不会再用value来定义了,但是placeholder还是可以用来设置默认值. section1--input:type="text" type=" ...

  4. js中触发表单提交

    html代码: <form action="/test/action" method="get" id="myForm"> &l ...

  5. 模拟js中注册表单验证

    示例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  6. 在JS中模拟表单的post提交,进行页面的跳转

    原文链接:https://blog.csdn.net/jal517486222/article/details/83147761 /* *功能: 模拟form表单的提交 *参数: URL 跳转地址 P ...

  7. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  8. 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定

    接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...

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

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

随机推荐

  1. 开涛spring3(6.5) - AOP 之 6.5 AspectJ切入点语法详解

    6.5.1  Spring AOP支持的AspectJ切入点指示符 切入点指示符用来指示切入点表达式目的,,在Spring AOP中目前只有执行方法这一个连接点,Spring AOP支持的Aspect ...

  2. 入坑以来最清晰的this指南[老哥们来交流指正]

    直接放有道云笔记的链接,博客园的markdown总是用不好. 1.这一篇是this的绑定(call,apply,bind) http://note.youdao.com/noteshare?id=c3 ...

  3. AutoMapper总结

    AutoMapper是一个对象和对象间的映射器.对象与对象的映射是通过转变一种类型的输入对象为一种不同类型的输出对象工作的.让AutoMapper有意思的地方在于它提供了一些将类型A映射到类型B这种无 ...

  4. Lock(二)解决Lock问题

    本文介绍通过Toad.EM及SQL语句来处理数据库产生的锁.在这之前需要对v$lock和v$session这两个数据字典有一定的了解. (一)使用Toad处理锁 (1)使用Toad的session b ...

  5. VR全景智慧城市搭建掀起实体市场潮流

    在互联网时代的今天,用户体验至上,全景智慧城市搭建作为一个新型的科技展示技术,通过新颖的广告方式更能吸引用户眼球,足不出户,观看现场实景,达到沉浸式体验.在这样的大环境下,全景智慧城市搭建开启了VR全 ...

  6. jquery点击非div区域隐藏div

    点击非div区域隐藏div,如图,点击圆的头像(.person-msg)弹出白色底框(.person-centre).点击圆头像以外的区域隐藏白色底框

  7. 【Python中if __name__ == '__main__': 的解析】

    在很多Python代码中,在代码的最下方会看到  if __name__ == '__main__':,这段代码到底有什么用呢? 在理解这个语句的作用前,需要知道的是,一般的Python文件后缀为.p ...

  8. SurfaceView的基本使用

    一.引入: Android提供了View来进行绘图处理,在大部分情况下,View都能满足绘图需求.大家都知道View是通过刷新来重绘视图,Android系统通过发出VSYNC信号来进行屏幕的重绘,刷新 ...

  9. android 定时器(Handler Timer Thread AlarmManager CountDownTimer)

    Android实现定时任务一般会使用以上(Handler Timer Thread AlarmManager CountDownTimer)五种方式.当然还有很多组合使用(比如Handler+Thre ...

  10. js的for循环闭包问题

    一个简单的例子,如果想循环输出数组中的每一个数值我们可以利用for循环来输出例如: <script type="text/javascript"> var arr=[& ...