<!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. [.net 面向对象程序设计深入]（6）.NET MVC 6 —— 模型、视图、控制器、路由等的基本操作

    [.net 面向对象程序设计深入](6).NET MVC 6 —— 模型.视图.控制器.路由等的基本操作 1. 使用Visual Studio 2015创建Web App (1)文件>新建> ...

  2. 为CentOS7（文字界面操作）系统安装gnome图形界面程序

    1.安装gnome sudo yum groupinstall "GNOME Desktop" "Graphical Administration Tools" ...

  3. Android开发学习之路-指纹识别api

    在android6.0之后谷歌对指纹识别进行了官方支持,今天还在放假,所以就随意尝试了一下这个api,但是遇到了各种各样的问题 ①在使用FingerPrintManager这个类实现的时候发现了很多问 ...

  4. php ajax 交互

    html 页面 <body> <button id="oBtn">点击我</button> <script type="text ...

  5. "org.eclipse.wst.validation" has been removed 导入maven 项目出错。

    在谷歌中找到解决方案: 右键关闭项目,在打开,将项目刷新,选中项目右键----->Maven4myeclipse------->Update maven project 错误消失. 若还有 ...

  6. 删除 Windows 旧 OS 加载器

    装过多个系统,然后又删除掉了,系统启动引导时,又把以前的废弃的系统引导给带了出来,试过多种方式,以下方法是最好的. 开始->运行->cmd bcdedit /v 查看要删除的"W ...

  7. 《C#高级编程》学习总结之LINQ

    一.标准的查询操作符 标准查询操作符 说明 Where OfType<TResult> 筛选操作符定义了返回元素的条件. Select SelectMany 投射操作符用于把对象转换为另一 ...

  8. SqlServer性能检测和优化工具使用详细

    工具概要 如果你的数据库应用系统中,存在有大量表,视图,索引,触发器,函数,存储过程,sql语句等等,又性能低下,而苦逼的你又要对其优化,那么你该怎么办?哥教你,首先你要知道问题出在哪里?如果想知道问 ...

  9. OpenCASCADE Curve Length Calculation

    OpenCASCADE Curve Length Calculation eryar@163.com Abstract. The natural parametric equations of a c ...

  10. ASP.NET Core的配置（4）：多样性的配置来源[上篇]

    较之传统通过App.config和Web.config这两个XML文件承载的配置系统,ASP.NET Core采用的这个全新的配置模型的最大一个优势就是针对多种不同配置源的支持.我们可以将内存变量.命 ...