今天写一个js验证 遇到点小坑 记录一下

button-普通按钮,submit-提交按钮。

  submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件上。


 

function check(){
var name = document.getElementById("name").value;
if(name == null || name == ''){
alert("用户名不能为空");
return false;
}
return true;
}

<form name="form" action="跳转的页面" method="post" onsubmit="return check()">
<input type="text" id="name"/>
<input type="submit" value="提交"/>
</form>

上面的场景中,表单在点击提交按钮后需要用JS进行处理(包括输入验证)后再提交的话,通常我们提倡用button,

如果需要使用submit提交前验证的话 应在方法前加return。onClick方法不加return 会自动提交,并不会起到约束的作用, 所以,使用submit时需要验证请加 return true或false。
如一个登陆模块,先验证用户名是否为空,如果为空,SUBMIT点击时永远提交不到from表单指定页面。只能是表单形式发送 而且不能再表单指定的页面中去验证传进来的值。

js中submit和button的区别的更多相关文章

  1. html中submit和button的区别(总结) [ 转自欣步同学 ]

    html中submit和button的区别(总结) submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了. 如果表单在点击提交按钮后需要用JS进行处理(包括输入验证 ...

  2. HTML中submit和button的区别

    submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了. 如果表单在点击提交按钮后需要用JS进行处理(包括输入验证)后再提交的话,通常都必须把submit改成butt ...

  3. html中submit和button的区别/ window.location.href 不跳转 的问题

    <input type="button">  <input type="submit"> 这两个的区别 是 button 不会自动提交表 ...

  4. html中 submit和button的区别?

    前者是向数据库提交表单 后者是单纯的按钮功能

  5. 网站开发进阶(四十四)input type="submit" 和"button"的区别

    网站开发进阶(四十四)input type="submit" 和"button"的区别   在一个页面上画一个按钮,有四种办法: 这就是一个按钮.如果你不写ja ...

  6. (网页)Angular.js 中 copy 赋值与 = 赋值 区别

    转自st.gg Angular.js 中 copy 赋值与 = 赋值 区别 为什么用 $scope.user = $scope.master; $scope.master 会跟着 $scope.use ...

  7. JS中isPrototypeOf 和hasOwnProperty 的区别 ------- js使用in和hasOwnProperty获取对象属性的区别

    JS中isPrototypeOf 和hasOwnProperty 的区别 1.isPrototypeOf isPrototypeOf是用来判断指定对象object1是否存在于另一个对象object2的 ...

  8. js中的substr和substring区别

    js中的substr和substring区别 Substring: 该方法可以有一个参数也可以有两个参数. (1)  一个参数: 示例: var str=“Olive”: str.substring( ...

  9. JS 中的require 和 import 区别整理

    ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使 ...

随机推荐

  1. Winform中设置DevExpress的RadioGroup的items从配置文件中加载

    场景 DevExpress的RadioGroup的items选项如果是不确定的话,需要其从配置文件中加载. 实现 在项目目录下新建Config文件夹,文件夹下新建xml配置文件. <?xml v ...

  2. QCustomplot使用分享(八) 绘制图表-加载cvs文件

    目录 一.概述 二.效果图 三.源码讲解 1.源码结构 2.头文件 3.移动游标 4.设置坐标轴矩形个数 5.添加图表数据 6.设置折线图类型 6.其他函数 四.测试方式 1.测试工程 2.测试文件 ...

  3. Android静态注册广播无法接收的问题(8.0+版本)

    如果你静态注册的广播无法接收到消息,请先检查下:你的安卓版本是不是8.0+ * 前言** Google官方声明:Beginning with Android 8.0 (API level 26), t ...

  4. RabbitMQ的六种工作模式总结

    最近学习RabbitMQ的使用方式,记录下来,方便以后使用,也方便和大家共享,相互交流. RabbitMQ的六种工作模式: 1.Work queues2.Publish/subscribe3.Rout ...

  5. SpringBoot系列——ElasticSearch

    前言 本文记录安装配置ES环境,在SpringBoot项目中使用SpringData-ElasticSearch对ES进行增删改查通用操作 ElasticSearch官网:https://www.el ...

  6. select2 分组后的选项无法被选中

    在使用select2组件的过程中发现分组下的选项无法选中,与分组在同一级的选项可以被选中! 1.所用select2版本select2-4.0.32 2.HTML代码: <input id=&qu ...

  7. 用Python帮你实现IP子网计算

    目录 0. 前言 1. ipaddress模块介绍 1.1 IP主机地址 1.2 定义网络 1.3 主机接口 1.4 检查address/network/interface对象 1.4.1 检查IP版 ...

  8. python3.6安装【scrapy】-最保守方法

    系统:win10平台    python版本:3.6.1 1. 下载并安装 pywin32: 进入https://sourceforge.net/projects/pywin32/files/,按照下 ...

  9. Servlet与Tomcat运行示例

    Servlet与Tomcat运行示例 本文将写一个servlet,然后将其部署到Tomcat的全过程.本文参考<深入拆解Tomcat_Jetty>内容. 一.基于web.xml开发步骤 下 ...

  10. Linux mint 启动文本模式(不启动图形界面)

    Linux Mint 系统用了很久,很顺手,赞一个! 有一天想同时运行多个虚拟机linux系统做实验,想着只启动文本模式可以省点内存资源,结果试了多种方法都不成功,网上现有针对Ubuntu原版和Cen ...