事件绑定(onsubmit)表单提交

学习路线:JavaScript基础语法(输出语句)->JavaScript基础语法(变量)->JavaScript基础语法(数据类型)->JavaScript基础语法(运算符)->JavaScript基础语法(流程控制语句)->JavaScript基础语法(类型转换)->JavaScript基础语法(函数)->Array_JavaScript->String_JavaScript->自定义对象_JavaScript->JavaScript_BOM->Window对象->confirm()、setInterval()、setTimeout()->History、Location->闪烁的灯泡->JavaScript_DOM->事件绑定(onclick,onfocus,onblur)->
事件绑定(onmouseout,onmouseover)
->事件绑定(onsubmit)表单提交
->提交表单与验证表单案例

小案例

  • onsubmit 表单提交事件

我们希望提交如下图的的表单,当我们点击按钮提交之后我们就可以成功提交表单。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><form id="register" action="#" ><input type="text" name="username" /><input type="submit" value="提交"></form><script></script>
</body>
</html>

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><form id="register" action="#" ><input type="text" name="username" /><input type="submit" value="提交"></form><script>document.getElementById("register").onsubmit = function (){//onsubmit 返回true,则表单会被提交,返回false,则表单不提交return true;}</script>
</body>
</html>

运行结果


说明:
上述通过表单提交的方式为GET提交,在后续的内容中我们会详细讲解,GET与POST之间的区别。

事件绑定(onsubmit)表单提交相关推荐

  1. 02.Vue3 基础语法:常用语法、列表渲染、事件绑定和表单双向绑定

    Vue3 基础语法 1. Vue 中应用和组件的基础概念 createApp createApp 表示创建一个 Vue 应用,存储在 app 变量中. 传入的参数表示,这个应用最外层的组件,应该如何展 ...

  2. Vue的常用指令(v-html {{}}文本插值,v-bind绑定属性,v-if条件渲染,v-for列表渲染,v-on @ 事件绑定,v-model表单绑定)

    Vue的常用指令(文本插值,绑定属性,条件渲染,列表渲染,事件绑定,表单绑定) Vue 的介绍 Vue 是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已 ...

  3. onsubmit表单提交简单使用

    一般表单判断哪些为必填项或者正则时候都会用到onsubmit函数,主要是通过返回的true或者false而进行执行,这里简单说下判断表单属性非空提交 onsubmit只能表单上使用,提交表单前会触发, ...

  4. HTML——JS—表单事件+表单提交

    目录 表单事件 表单提交 表单事件 <!DOCTYPE html> <html><head><meta charset="utf-8"&g ...

  5. vue.js的一些事件绑定和表单数据双向绑定

    知识点: v-on:相当于: 例如:v-on:click==@click ,menthods事件绑定 v-on修饰符可以指定键盘事件v-model进行表单数据的双向绑定 <template> ...

  6. form的onsubmit事件--表单提交前的验证最佳实现方式

    今天遇到了一个问题,页面中include了很多的公共页面(都是没有form的),并且里面好多的地方都是自行提交的(页面中加入一个type="submit"域,然后js中写入sumb ...

  7. html表单提交前检查,form的onsubmit事件--表单提交前的验证最佳实现方式

    今天遇到了一个问题,页面中include了很多的公共页面(都是没有form的),并且里面好多的地方都是自行提交的(页面中加入一个type="submit"域,然后js中写入sumb ...

  8. onsubmit阻止表单提交的一种方式

    最近做移动开发,一下从后台转移到前端了,之前写了一年的java代码,现在天天搞jQ  css html ,肯定有点不习惯,不过现在已经适应了,写页面还是挺好玩的. 言归正传,今天遇到的就是怎么阻止表单 ...

  9. 表单onsubmit事件无效以及表单onsubmit使用ajax无效解决

    [推荐]2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 今天在做登陆页面,想法是这样的: 前台提交表单给后台,如果用户名密码不正确,就提示用户用户名密码不对,并不跳转 ...

最新文章

  1. 使用C++实现单项选择题标准化考试系统设计
  2. 计算机安全OSI安全框架
  3. java oom dump_JVM 在遇到OOM(OutOfMemoryError)时生成Dump文件的三种方式
  4. Android 屏幕尺寸知识
  5. [vue] 说说你对选项el,template,render的理解
  6. 自己动手,实现一种类似ListT的数据结构(二)
  7. sql 查看Oralce 数据库连接状态
  8. 协同过滤算法_推荐系统(5):协同过滤算法的基本思想
  9. 【bzoj3576】 Hnoi2014—江南乐
  10. js导出变量 vue_vue.js前端实现excel表格导出和获取headers里的信息
  11. 安装webpack命令环境
  12. C++中的左值和右值的区别
  13. RightFont 5字体管理工具新手使用指南
  14. 面向对象java试题_经典面向对象试题,用Java做,要详细点的!先谢过了
  15. acs510使用技巧_ACS510-ABB操作说明
  16. Ubuntu搭建FTP服务器
  17. CVPR 2019 论文大盘点—目标检测篇
  18. Java-微信授权and手机号授权
  19. 解决Creo 5.0在打开stl模型后,无法查看左视图,右视图
  20. 【OpenGL基础】|| OpenGL渲染过程介绍

热门文章

  1. typora简历主题推荐
  2. MySql之MySql导出表结构
  3. 奶油奶酪和加工奶酪行业研究及十四五规划分析报告
  4. 为什么你值得入手一个 Macbook?
  5. Hashmap实现原理及扩容机制详解
  6. Qt读取pdf文件使用MuPdf库
  7. 重型自卸汽车设计(转向系及前桥设计)(论文+CAD图纸+开题报告+翻译……)
  8. 商标被驳回了怎么办?如何拯救你的商标!
  9. Oracle GoldenGate的思想天空--感悟OGG的本质
  10. Postman请求头的使用