<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title> new document </title>

  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

  <style type="text/css"></style>

  <script type="text/javascript">

    //实例：submit按钮，结合onsubmit事件，验证和提交表单

    function checkForm(){

        //判断用户名和密码是否为空

        if(document.form1.username.value==""){

                window.alert("用户名不能为空");

                return false;

        }else if(document.form1.username.value.length<5 || document.form1.username.value.length>20){

                window.alert("用户名在5-20位");

                return false;

        }else if(document.form1.userpwd.value==""){

                window.alert("密码不能为空");

                return false;

        }else if(document.form1.userpwd.value.length<5 || document.form1.userpwd.value.length>20){

                window.alert("密码必须在5-20位");

                return false;

        }

    }

  </script>

 </head>

 <body>

 <form name="form1" method="get" action="login.php"    onsubmit="return checkForm()">

     用户名：<input type="text" name="username" />

     密码：<input type="password" name="userpwd" />

     <input type="submit" value="提交表单" />

</form>

 //单机以下的链接，不会跳转网址，因为默认动作被阻止了

 <a href="http://www.itcast.cn" onclick="return false">北京交通网</a>

 </body>

</html>

onsubmit="return checkForm()" 加return是事件返回事件，当返回值为false的时候会阻止表单提交。

事件返回值：

事件的返回值，会影响事件的默认动作。

如果事件的返回值为false，则阻止默认动作执行。

如果事件返回值为ture或空，则默认动作执行。

如果事件没有任何返回值，则默认动作执行。

受影响的事件有两个：onclick、onsubmit

其他事件的返回值，不会影响默认动作。

onclick的返回值也会组织submit的提交。

form表单提交和阻止的更多相关文章

  1. <form> 表单提交 return 阻止内容为空事件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. js模拟form表单提交数据, js模拟a标签点击跳转，避开使用window.open引起来的浏览器阻止问题

    js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...

  3. 阻止form表单提交的问题

    阻止form表单提交这种场景可能在生活中,我们经常碰到,而在我们第一印象里面可能我们用return false 去阻止表单默认行为. 但是,有中情况我们用return false 不能阻止表单提交 & ...

  4. Form表单提交数据的几种方式

    一.submit提交 在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type='submit'>)就可以进行数据的提交, ...

  5. 20181019 记录 window.setTimeout('dofunction()',2000); - layui form 表单提交 事件 - F11全屏 事件 window.onresize

    1 延时事件 window.setTimeout('dofunction()',2000); 函数外面要有引号 如果没有引号 就不能延时执行 应该是内容进行eval,所以外层不是传递字符串的话,外层函 ...

  6. form表单提交没有跨域问题，但ajax提交存在跨域问题

    浏览器的策略本质是:一个域名下面的JS,没有经过允许是不能读取另外一个域名的内容,但是浏览器不阻止你向另外一个域名发送请求. 所以form表单提交没有跨域问题,提交form表单到另外一个域名,原来页面 ...

  7. 关于form表单提交ajaxForm和ajaxSubmit的用法与区别

    前几天在学习form表单提交时看到这两种方法,这两种方法都是实现form的ajax提交的方法,看了很多资料还是不太明白其用法和区别,最后直接自己写demo,很快就理解,所以说实操是学习的最快捷直接的途 ...

  8. jQuery Form 表单提交插件-----formSerialize，fieldSerialize，fieldValue，resetForm，clearForm，clearFields的 应用

    一.jQuery Form的其他api  1.  formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...

  9. jQuery Form 表单提交插件----Form 简介，官方文档，官方下载地址

     一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...

随机推荐

  1. MySQL 分析服务器状态

    标签:MYSQL/数据库/性能优化/调优 概述 文章简单介绍了通过一些查询命令分析当前服务器的状态. 目录 概述 获取服务器整体的性能状态 SQL操作计数 总结 步骤 获取服务器整体的性能状态 首先对 ...

  2. Azure PowerShell (5) 使用Azure PowerShell创建简单的Azure虚拟机和Linux虚拟机

    <Windows Azure Platform 系列文章目录> 本文介绍的是国外的Azure Global.如果是国内由世纪互联运维的Azure China,请参考这篇文档: Azure ...

  3. [oracle]逗号(或分号等)间隔的列,按这一列劈分后转多行

    今天遇到个需求,要匹配两个表, 但是关联的字段,在另一个表中是放在一个字段中用分号分割的 怎么全部匹配呢? 后来在网上搜到了, 记录下 SELECT cp.ES_EXTNUMBER, cp.ES_AG ...

  4. Angular1还是Angular2

    Angular1还是Angular2 学完angular1,尝试去看了下angular2,虽然号称更强更快,可是这基于ES6和TypeScript的全新框架让人完全招架不住,而且我只是需要angula ...

  5. [转]关于typedef的用法总结

    不管实在C还是C++代码中,typedef这个词都不少见,当然出现频率较高的还是在C代码中.typedef与#define有些相似,但更多的是不同,特别是在一些复杂的用法上,就完全不同了,看了网上一些 ...

  6. OPEN CASCADE Multiple Variable Function

    OPEN CASCADE Multiple Variable Function eryar@163.com Abstract. Multiple variable function with grad ...

  7. Memory Management in Open Cascade

    Open Cascade中的内存管理 Memory Management in Open Cascade eryar@163.com 一.C++中的内存管理 Memory Management in ...

  8. n个结点，不同形态的二叉树（数目+生成）

    题目链接: 不同的二叉查找树:http://www.lintcode.com/zh-cn/problem/unique-binary-search-trees/ 不同的二叉查找树 II:http:// ...

  9. Neutron 架构 - 每天5分钟玩转 OpenStack（67）

    前面我们讨论了 Neutron 的基本概念,今天我们开始分析 Neutron 的架构. Neutron 架构 与 OpenStack 的其他服务的设计思路一样,Neutron 也是采用分布式架构,由多 ...

  10. pixi.js教程中文版--基础篇

    前言 Pixi.js使用WebGL,是一个超快的HTML5 2D渲染引擎.作为一个Javascript的2D渲染器,Pixi.js的目标是提供一个快速的.轻量级而且是兼任所有设备的2D库.提供无缝 C ...