<!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. SQLSERVER语句 in和exists哪个效率高本人测试证明

    SQLSERVR语句 in和exists哪个效率高本人测试证明 最近很多人讨论in和exists哪个效率高,今天就自己测试一下 我使用的是客户的数据库GPOSDB(已经有数据) 环境:SQLSERVE ...

  2. 翻译-使用Ratpack和Spring Boot打造高性能的JVM微服务应用

    这是我为InfoQ翻译的文章,原文地址:Build High Performance JVM Microservices with Ratpack & Spring Boot,InfoQ上的中 ...

  3. ArcGIS之Cartogram地图变形记

    一.地图会说谎 地图作为真实世界的抽象,是“用图说话”最可靠的工具,但是有的时候地图也会撒一些小小的谎言,其中最著名的例子当属美国总统大选.如图1是2012年美国总统大选后网上给出的一个结果图,红色代 ...

  4. iOS完整学习路线图

  5. Java基础-服务器的发送和接收

    package hanqi.test; import java.io.IOException; import java.io.OutputStream; import java.io.PrintWri ...

  6. Powershell 切换IE代理

    买了一个穿越防火墙的代理,在 Windows 下每次手动设置代理都好麻烦,最后不断尝试 Powershell 来设置,最后也终于成功了.   其实利用 Powershell 来设置 IE 的代理,就是 ...

  7. 深入理解客户区尺寸client

    前面的话 关于元素尺寸,一般地,有偏移大小offset.客户区大小client和滚动大小scroll.前文已经介绍过偏移属性,后文将介绍scroll滚动大小,本文主要介绍客户区大小client 客户区 ...

  8. [c++] Copy Control

    C++ allows the programmer to define how objects are to be copied, moved, assigned and destroyed. Tog ...

  9. android 如何正确使用 泛型 和 多参数 “偷懒”

    我要实现这样一个标题栏 共 4 个选项,采用布局是一个 TextView 对应一个小三角 ImageView,各个选项没被点击时,字体颜色是 黑色,小三角不显示,点击后,字体变色,小三角居下显示,同时 ...

  10. 关于一道数据库例题的解析。为什么σ age>22 (πS_ID，SCORE (SC) ) 选项是错的？

    本人大二学子.近段时间在做数据库复习题的时候遇到一道题,如下. 有关系SC(S_ID,C_ID,AGE,SCORE),查找年龄大于22岁的学生的学号和分数,正确的关系代数表达式是( ) . ⅰ. πS ...