<!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. 新浪计数业务之Redis

    今天听一个同事说新浪使用的是Redis,于是自己将研究的过程整理出来以备后用. 我们都知道微博这玩意儿现在很火,新浪作为国内最早使用redis,并且是国内最大的redis使用者,当然备受人们关注.新浪 ...

  2. 《Entity Framework 6 Recipes》翻译系列(2) -----第一章 开始使用实体框架之使用介绍

    Visual Studio 我们在Windows平台上开发应用程序使用的工具主要是Visual Studio.这个集成开发环境已经演化了很多年,从一个简单的C++编辑器和编译器到一个高度集成.支持软件 ...

  3. Android开发学习之路-Android Studio开发小技巧

    上一次发过了一个介绍Studio的,这里再发一个补充下. 我们都知道,Android Studio的功能是非常强大的,也是很智能的.如果有人告诉你学Android开发要用命令行,你可以告诉他Andro ...

  4. LeetCode OJ1:Reverse Words in a String

    问题描述: Given an input string, reverse the string word by word. For example,Given s = "the sky is ...

  5. Java面试（1）-- Java逻辑运算符

    class Demo04{ public static void main(String[] args){ //逻辑运算符 //例1 System.out.println(true | false & ...

  6. AngularJS中的表单验证

    AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...

  7. jarsigner签名报错Invalid keystore format

    由于之前在魅族市场的APK包都不是自己上传的,而是魅族从其他安卓市场帮拉去过来了. 所以需要我们自己去认领APK包. 这个时候就需要按照魅族给的未签名测试包给重新签名然后提交审核了. 1:看完以下说明 ...

  8. Leetcode-206 Reverse Linked List

    #206.  Reverse Linked List Reverse a singly linked list. /** * Definition for singly-linked list. * ...

  9. Sql Server系列：索引基础

    1 索引概念 索引用于快速查找在某个列中某个特定值的行,不使用索引,数据库必须从第1条记录开始读完整个表,知道找出需要的行.表越大,查询数据所花费的时间越多.如果表中查询的列有索引,数据库能快速到达一 ...

  10. Evaluate Math Expression

    Evaluate Math Expression eryar@163.com 摘要Abstract:本文简要介绍了数学表达式解析求值的几款开源软件,并结合程序代码说明了OpenCascade中表达式包 ...