表单结构如下所示:

  <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. Windows 自动获取IP脚本

    @echo off echo 正在自动获取IP地址.... set 连接名称=以太网 netsh interface ip set address name = "%连接名称%" ...

  2. 关于微信小程序遇到的wx.request({})问题

    域名请求错误问题 当我们在编写小程序,要发送请求时,wx.request({})时或许会遇到如下的问题: 一:这是因为微信小程序的开发中,域名只能是https方式请求,所以我们必须在小程序微信公众平台 ...

  3. [大数据]-Logstash-5.3.1的安装导入数据到Elasticsearch5.3.1并配置同义词过滤

    阅读此文请先阅读上文:[大数据]-Elasticsearch5.3.1 IK分词,同义词/联想搜索设置,前面介绍了ES,Kibana5.3.1的安装配置,以及IK分词的安装和同义词设置,这里主要记录L ...

  4. php的八大数据类型

    1. 八大数据: bool 布尔类型:0,1:真假 integer 整形 float 浮点型 string 字符串 array 数组 object 对象,类,class resource 文件,图片, ...

  5. KeepAlive随笔

    参数说明 :  1 . SocketTimeout               // 响应超时时间,超过此时间不再读取响应  2 . ConnectTimeout    // 链接建立的超时时间  3 ...

  6. 对clear float 的理解

    之前自己对于清除浮动的用法比较模糊 ,如果用到的话,一般都是采用简单粗暴的方式解决,就是直接用overflow:hidden,但是越用久就会发现其实有BUG,这个BUG正是overflow:hidde ...

  7. jmeter 环境部署、数据库设置、分布式设置、多网卡配置等随笔

    <!-- linux系统修改系统环境变量  系统语言-->[root@web-249 ~]# env|grep LANGLANG=zh_CN.UTF-8[root@web-249 ~]# ...

  8. 用border或者div制作三角形等图形

    一般情况下, 我们设置盒子的宽高度, 及上下左右边框, 具体代码如下: 通过上述代码,div的具体样式如下: 现在在上面基础上, 我们把div的宽高度都设为0时, 现在我们再次查看效果,如下图: 这时 ...

  9. jquery中html、text、val回调函数

    先扫盲: 摘自菜鸟教程:jQuery 方法:text().html() 以及 val()拥有回调函数. 回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值.然后以函数新值返回您希望使 ...

  10. 作为前端,我为什么选择 Angular 2?

    转自:https://sanwen8.cn/p/2226GkX.html 没有选择是痛苦的,有太多的选择却更加痛苦.而后者正是目前前端领域的真实写照.新的框架层出不穷:它难吗?它写得快吗?可维护性怎样 ...