今天写一个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. Android中px dpi dip density densityDpi 的相关说明

    转自:http://www.cnblogs.com/wader2011/archive/2011/11/29/2267490.html 概念解释 名词 解释 Px (Pixel像素) 不同设备显示效果 ...

  2. FastReport安装包下载、安装、去除使用限制以及工具箱中添加控件

    场景 FastReport .NET 2019是一款适用于Windows Forms, ASP.NET和MVC框架的功能齐全的报表分析解决方案.可用在Microsoft Visual Studio 2 ...

  3. Python编程书籍高清PDF免费下载

    场景 CSDN: https://blog.csdn.net/badao_liumang_qizhi 博客园: https://www.cnblogs.com/badaoliumangqizhi/ 哔 ...

  4. PythonI/O进阶学习笔记_6.对象引用,可变性和垃圾回收

    前言: 没有前言了- -......这系列是整理的以前的笔记上传的,有些我自己都忘记我当时记笔记的关联关系了. 记住以后 笔记记了就是用来复习的!!!不看不就啥用没了吗!!! content: 1.p ...

  5. Day 23 系统服务之救援模式

    1.CentOS6与Centos 7启动流程 4.运行级别C6&C7 0 关机 1 单用户模式 (超级权限 必须面对实体硬件) 2 暂未使用 3 字符界面(黑框) 4 暂未使用 5 图形界面 ...

  6. 使用 Nginx 部署前后端分离项目,解决跨域问题

    前后端分离这个问题其实松哥和大家聊过很多了,上周松哥把自己的两个开源项目部署在服务器上以帮助大家可以快速在线预览(喜大普奔,两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了 ...

  7. pyhon 浅copy

    一般python的copy是没有用的, 但是让你熟悉浅copy给你举个清晰的例子 person = ["name",["money",100]] p1 = pe ...

  8. java -PDF添加文本水印与图片水印

    java pdf添加水印文本及图片文本 PDF文件添加文本水印: private static int interval = 30; public static void waterMark(Stri ...

  9. Spring 梳理 - 构造web项目时,使用eclipse如何引用jar包

    方法1:直接将jar复制到web项目中的WEB-INF/lib目录中 方法2:构造buildpath时,不使用“外部jar”的形式

  10. rpm,yum

    rpm RedHat Package Manager软件包管理器的核心功能:1.制作软件包2.安装.卸载.升级.查询.校验.数据库的重建.验证数据包等工作 安装: rpm -i    /PATH/TO ...