表单结构如下所示:

  <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. java 空指针异常造成的原因有哪些

    实际上 空指针异常   也就是你用了一个没有实际值的对象 1. 某一对象没有被实例化,就拿来使用,如调用此对象的方法,会抛空指针异常. 2. 获取从别的对象传过来的对象为空 3. 数据库查询方面的空指 ...

  2. CentOS上安装NodeJs

    (1)参照:http://www.cnblogs.com/zhangqingsh/archive/2013/04/15/3022583.html  安装Python2.7 (2)安装Nodejs yu ...

  3. grok 匹配log4j

    input { file { codec => multiline { pattern => "^\[2016" negate => true what => ...

  4. poi合并单元格同时导出excel

    poi合并单元格同时导出excel POI进行跨行需要用到对象HSSFSheet对象,现在就当我们程序已经定义了一个HSSFSheet对象sheet. 跨第1行第1个到第2个单元格的操作为 sheet ...

  5. java设计模式面试考点

    分类(常见的设计模式) 1.创建型模式 a) 工厂模式 b) 抽象工厂模式 c) 单例模式 d) 建造者模式 2.结构型模式 a) 适配器模式 b) 装饰器模式 c) 桥接模式 d) 代理模式 3.行 ...

  6. MySql的学习笔记

    良好的理解sql语句: 列:理解可以运算的成变量 where: 理解成表达式,放在行中看是否成立 查出来的结果可以当成一张表理解,select 套用select综合查询:   五种查询 where g ...

  7. Python使用PyMysql操作数据库

    安装 pip install -U pymysql 连接数据库 连接数据库有两种不同的格式 直接使用参数 代码如下 import pymysql.cursors connection = pymysq ...

  8. vue-router单页应用简单示例(二)

    我们先来理一下思路. 图1:main.js 引入vue,App.vue,router/index.js文件 声明要渲染的Id为app,将App.vue中的模版渲染到入口界面(就是打开localhost ...

  9. C#中==运算符

    在这篇博客中,我们将介绍如下内容: ==运算符与基元类型 ==运算符与引用类型 ==运算符与String类型 ==运算符与值类型 ==运算符与泛型 ==运算符与基元类型 我们分别用两种方式比较两个整数 ...

  10. 细说Nullable<T>类型

    目录一.简介二.语法和用法三.类型的转换和运算四.装箱与拆箱五.GetType()方法六.ToString()方法七.System.Nullable帮助类八.语法糖 一.简介 众所周知,值类型变量不能 ...