表单结构如下所示:

  <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. REDIS安装与配置

    1. mkdir /home/redis/ 2. mkdir /home/redis/conf 3. mkdir /home/redis/data 4. cd /home 5. 下载redis版本3. ...

  2. 基于binlog来分析mysql的行记录修改情况(python脚本分析)

          最近写完mysql flashback,突然发现还有有这种使用场景:有些情况下,可能会统计在某个时间段内,MySQL修改了多少数据量?发生了多少事务?主要是哪些表格发生变动?变动的数量是怎 ...

  3. Android学习笔记View的工作原理

    自定义View,也可以称为自定义控件,通过自定义View可以使得控件实现各种定制的效果. 实现自定义View,需要掌握View的底层工作原理,比如View的测量过程.布局流程以及绘制流程,除此之外,还 ...

  4. 东正王增涛浅析OA信息化整合平台系统在企业中的应用价值

    王增涛说OA信息化整合平台系统作为企业管理中最基础的管理软件,已在企业成长道路上存在多年,它的应用开启了智能移动办公的先河,也让企业的办公流程管理更加的便捷.高效.流畅.省时.省力,它的使用不但让企业 ...

  5. .net、jquery、ajax、wcf实现数据库用户名检测局部刷新

    jquery代码 $(function() { $("#user_name").blur(function(){ var user_name=$("#user_name& ...

  6. Publishing failed with multiple errors.问题解决

    问题:Publishing failed with multiple errors.(发布失败与多个错误) 原因:项目工程文件删除,但eclipse里面仍显示存在. 解决方案:刷新项目工程,重新部署, ...

  7. 【Selenium】idea的selenium环境配置

    1.maven配置 下载地址:http://maven.apache.org/download.cgi# 下载内容:apache-maven-3.5.0-bin.zip 环境变量:M2_HOME:E: ...

  8. 《物联网框架ServerSuperIO教程》-21.终端控制传感器或设备,形成回路控制。附:demo源代码

    21.1     概述 ServerSuperIO以前所做的工作逐步为形成回路控制或级联控制打下基础,例如:服务连接器和设备驱动连接器的开发与应用.总之,是通过多种形式下发命令控制设备(驱动)或传感器 ...

  9. debian安装dwm窗口管理器

    我安装debian版本是debian-8.8.0-i386-netinst最小安装 首先去官网下载源代码 http://git.suckless.org/dwm #安装x-window环境 $sudo ...

  10. vue-router路由参数刷新消失的问题

    场景:vue-router实现的单页应用,登录页调用登录接口后,服务器返回用户信息,然后通过router.push({name: 'index', params: res.data})传给主页组件,并 ...