表单结构如下所示:

  <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. 使用js控制表单重复提交(1加锁,2事件方式,3 EasyUI中解决表单重复提交)

    方法一. var flag = true; $(function() { $("#interested").click(function() { beInterested(); } ...

  2. oninput等表单事件

    oninput等表单事件 过去我们常使用keydown和keyup辅助表单元素的处理,这要求处理时,表单元素必须处于激活(聚焦)状态.oninput事件可以实时监听文本框的输入变化.   现代浏览器支 ...

  3. js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题

    js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...

  4. MVC中处理表单提交的方式(Ajax+Jquery)

    MVC中处理表单有很多种方法,这里说到第一种方式:Ajax+Jquery 先看下表单: <form class="row form-body form-horizontal m-t&q ...

  5. Excel中的表单控件和active控件

    EXCEL中有两种控件:表单控件和active控件 表单控件是excel5和excel95开始使用的,从excel97开始,active控件开始出现 关于表单控件和active控件的区别和使用范围,网 ...

  6. django中form表单的提交:

    一,关于表单: 表单在百度百科的解释:   表单在网页中主要负责数据采集功能.一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域 ...

  7. AngularJS中的表单验证

    AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...

  8. $().each 和表单事件的坑

    在用each循环时 1.想结束循环 return false 2.想跳过某循环 return 3.想跳出function 不行,请切换成其他循环如 for 使用form表单事件 1.必须要有submi ...

  9. angular中的表单验证

    angular中的表单验证很强大, 一共有5中验证信息,$valid,$invalid,$pristine,$dirty,$error. $valid-----当验证通过的时候,为true,不通过的时 ...

随机推荐

  1. 如何在sublime text上快速访问html页面?

    第一步.安装package control和安装sidebarenhancements插件 原来Subl3安装Package Control很麻烦,现在简单的方法来了 使用Ctrl+`快捷键或者通过V ...

  2. T-SQL Recipes之Database Backups

    The Problem 在DBA和T-SQL码奴日常工作中,比如常规检查,服务管理,数据库管理, 是其中最具挑战性的一个领域. 在相似任务中,比如索引碎片管理,统计管理,数据库备份是异常重要的,对任何 ...

  3. 三、oracle数据库成功安装步骤 Oracle数据源配置

      安装完Oracle驱动后,如需连接远程Oracle数据库,还需进行数据源配置,类似Windows下的ODBC数据源配置. 运行"开始菜单\Oracle - OraDb11g_home1\ ...

  4. iOS中的过期方法和新的替代方法

    关于iOS中的过期方法和新的替代方法 1.获取某些类的UINavigationBar的统一外观并设置UINavigationbar的背景 注:方法名改了但是基本使用方法不变 + (instancety ...

  5. when will a databasechange be committed?

    1) Database-updates via DML in a SQLExec-statement (e.g. INSERT INTO PS_TEST_TABLE VALUES(‘value_fie ...

  6. Composite模式

    1 意图:将对象组成树形结构,以表示“部分——整体”的层次结构.Composite使得用户对单个对象和组合对象的使用具有一致性. 2 动机:同意处理图元对象和包含图元的容器对象.Composite通过 ...

  7. C#(Winform) Http 发送数据

    Get方式 private string HttpGet(string url, string postData) { HttpWebRequest request = (HttpWebRequest ...

  8. iOS下使用SHA1WithRSA算法加签源码

    首先了解一下几个相关概念,以方便后面遇到的问题的解决: RSA算法:1977年由Ron Rivest.Adi Shamirh和LenAdleman发明的,RSA就是取自他们三个人的名字.算法基于一个数 ...

  9. JavaScript初学者应注意的七个细节

    每种语言都有它特别的地方,对于JavaScript来说,使用var就可以声明任意类型的变量,这门脚本语言看起来很简单,然而想要写出优雅的代码却是需要不断积累经验的.本文利列举了JavaScript初学 ...

  10. codevs 1201 最小数和最大数

    http://codevs.cn/problem/1201/ 1201 最小数和最大数  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 青铜 Bronze 题解       题 ...