在项目中为一个表单（from）编写onsubmit()脚本的时候，经常需要验证表单中数据的合法性

所以常会写道：<form action="/admin/addUser.do" method="post" onsubmit="validateForm();">，试图在validateForm()中return false来阻止表单的提交。实际上的效果是即使return false 表单 还是会提交。

后来发现 onsubmit="return validateForm()"就没有问题了 　　　　在表单中加上onsubmit="return false;"可以阻止表单提交

　　onsubmit=" checkForm(this);" 和 onsubmit="return checkForm(this);"的区别？

  1. 下面是简单的一小段代码：
  2.  
  3. java代码: 
  4.  
  5. <form action="index.jsp" method="post" onsubmit="submitTest();">
  6.     <INPUT value="www">
  7.     <input type="submit" value="submit">
  8. </form>
  9. <SCRIPT LANGUAGE="JavaScript">
  10. <!--
  11.     function submitTest() {
  12.         // 一些逻辑判断
  13.      return false;
  14.     }
  15. //-->
  16. </SCRIPT>

　此种写法，点击submit按钮该表单照样会提交，为何？

原来onsubmit属性就像是<form>这个html对象的一个方法名，其值（一字符串）就是其方法体，默认返回true；和Java一样，在该方法体中你可以写任意多个语句，包括内置函数和自定义函数，如

  1. java代码: 
  2.  
  3. onsubmit="
  4.  
  5.     alert('haha'); // 内置函数
  6.  
  7.     submitTest();  // 自定义函数
  8.  
  9.     alert(this.tagName); // 用到了this关键词
  10.  
  11.     ......(任意多条语句)   
  12.  
  13.     return false;
  14.  
  15. "

就相当于

  1. Form.prototype.onsubmit = function() {
  2.  
  3.     alert('haha'); // 内置函数
  4.  
  5.     submitTest();  // 自定义函数
  6.  
  7.     alert(this.tagName); // 用到了this关键词
  8.  
  9.     ......(任意多条语句)   
  10.  
  11.     return false;
  12.  
  13. };

　　这样的话你就覆写了(override)其默认方法（默认返回true）大家注意到方法体中可以用this这个关键词，这里即代表了<form>的对象实例。

经过这样的分析后，以上情况就不难理解了：

  1. <form action="index.jsp" method="post" onsubmit="submitTest();">　　这样写，override方法的效果为：
  1. Form.prototype.onsubmit = function() {
  2.  
  3.     submitTest();
  4.  
  5. };

　　在这里submitTest()虽然返回false，但我们只执行了此函数，没有对其结果进行任何处理。而

  1. <form action="index.jsp" method="post" onsubmit="return submitTest();">

　　override方法的效果为：

  1. Form.prototype.onsubmit = function() {
  2.  
  3.     return submitTest();
  4.  
  5. };

　　这样，我们利用到了它的返回值，达到了预期效果。

　　其实form中有一个方法是对form表单中的数据进行校验.但是需要点击submit按钮才能触发这个校验

  1. <html>
  2. <head>
  3. <script>
  4. function checkForm(form) {
  5.     if(form['nameId'].value == "") {  
  6.  
  7.         alert("姓名不能为空!");
  8.         return false;
  9.     }
  10.     return true;
  11. }
  12. </script>
  13. </head>
  14. <body>  
  15.  
  16. <form id="formId" action="www.baidu.com" onsubmit="return checkForm(this)">
  17. 请输入姓名:<input type="text" id="nameId"/>
  18. <input type="submit" value="提交"/>
  19. </form>
  20. </body>
  21. </html>

2.在js中调用onsubmit方法

  1. function checkForm(form){
  2.     if(form['o.NSfk'].value=="") {
  3.         alert("实付款为空!");
  4.         return false;
  5.     }
  6.     if(form['o.DFksj'].value=="") {
  7.         alert("收款日期为空!");
  8.         return false;
  9.     }
  10.     return true;  
  11.  
  12. }
  13. function tijiao() {
  14.     var form = document.getElementById("productFormId");
  15.     if(form.onsubmit()==false) {
  16.         return;
  17.     }
  18.     form.submit();  
  19.  
  20. }

注意：onsubmit事件在提交数据成功后触发，即在出发action之后触发

  1. 在javascript中定义一个函数：
    function f(){
        return false;
  2.  
  3. }
  4.  
  5. <form action="text.html" onsubmit="f()">
        <input type="text" ............/>
  6.  
  7.     <input type="submit" value="点击提交"...../>
  8.  
  9. </form>
  10.  
  11. f()返回的是false为啥点击提交的时候还能跳到text.html？
    解答：
  1. onsubmit事件在提交数据成功后触发，你如果要阻止提交的话可以这样：
    <input type="submit" value="点击提交" onclick="return f()" />
    这样在提交前就阻止了点击事件

表单数据校检方法 onsubmit()的使用？的更多相关文章

  1. session_start()导致history.go(-1)返回时无法保存表单数据的解决方法

    问题背景: 在填写完表单提交时,由于某个表单项可能填写的不合法,导致提交失败,返回表单页面.但返回后所有的表单都被清空了,重新填写比较麻烦,度娘解释说,是由于每个页面都调用了session_start ...

  2. django的FormView中，自定义初始化表单数据的曲折方法

    这个技巧,主要是用于表单初始化及回显. 也就是说,如果用户的数据库里有数据,则要将相应的数据显示在表单里, 如果用户的数据库里没有数据,才会生成一个空白的表单给用户, 这样才显得专业塞! 而我面对的尴 ...

  3. jquery表单数据验证扩展方法

    /** 表单数据验证 **/ $.fn.Validform = function () { var Validatemsg = ""; var Validateflag = tru ...

  4. 表单数据验证方法（二）——ASP.NET后台验证

    昨天写了一下关于如何在前台快捷实现表单数据验证的方法,今天接着昨天的,把后台实现数据验证的方法记录一下.先说明一下哈,我用的是asp.net,所以后台验证方法也是基于.net mvc来做的. 好了,闲 ...

  5. Action 中获取表单数据的三种方式

    (尊重劳动成果,转载请注明出处:http://blog.csdn.net/qq_25827845/article/details/53138905  冷血之心的博客) Action 中获取表单提交数据 ...

  6. Servlet 响应 响应相关与重定向 请求 获取表单数据2种方法

    一.HttpServletResponse  (响应) 包括下面三个: 1.响应消息行  HTTP/1.1  200 OK 200是HTTP状态码, 代表请求已成功. (查httpservletres ...

  7. TableView 校检表

    这俩天学习了tableView 校检表 主要就是通过一个方法来跟踪当前选中的行.下面将声明一个NSIndexPath 的属性来跟踪最后选中的行.这篇文章希望能给那些初学者带来学习的乐趣.不说了直接上代 ...

  8. Struts2中Action取得表单数据的几种方法

    Struts2中Action取得表单数据的几种方法   Struts2中Action获得表单数据的几种方法struts2 Action获取表单传值 1.通过属性驱动式JSP: <form act ...

  9. ASP.NET MVC中在Action获取提交的表单数据方法总结 (4种方法，转载备忘)

    有Index视图如下: 视图代码如下: <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Mas ...

随机推荐

  1. poj 2408 Apple Tree

    http://poj.org/problem?id=2486 典型的回溯题目:特别是状态方程用三维的来标记是否要走回路. 题意:一颗树,n个点(1-n),n-1条边,每个点上有一个权值,求从1出发,走 ...

  2. Partition List ——LeetCode

    Given a linked list and a value x, partition it such that all nodes less than x come before nodes gr ...

  3. 新的一年新的气象 云计算与SOA

    ［David S.Linthicum］著 云计算和SOA是不同的概念,但是它们却相互联系.SOA是架构模式,而云计算是架构的实例,或者说是架构的一种选择,SOA更具整体性和战略性,它解决的是包括业务驱 ...

  4. HDOJ(HDU) 2137 circumgyrate the string(此题用Java-AC不过！坑)

    此题如果有用JavaACDSee,请评论,谢谢了. Problem Description Give you a string, just circumgyrate. The number N mea ...

  5. [转载]Linux服务器性能评估与优化

    转载自:Linux服务器性能评估与优化 一.影响Linux服务器性能的因素 1. 操作系统级 CPU 内存 磁盘I/O带宽 网络I/O带宽 2.        程序应用级 二.系统性能评估标准 影响性 ...

  6. XQuery FLWOR 表达式

    FLWOR 是 "For, Let, Where, Order by, Return" 的只取首字母缩写.for 语句把 bookstore 元素下的所有 book 元素提取到名为 ...

  7. provider: 命名管道提供, error: 40 - 无法打开 SQL Server 联系)

    李和server连接错误. 在连接 SQL Server 2005 时刻.在默认设置 SQL Server 不同意的远程连接可能导致此故障. (provider: 命名管道提供, error: 40 ...

  8. Java 实现 SSH 协议的客户端登录认证方式--转载

    背景 在开篇之前,让我们先对 SSH 协议有个宏观的大致了解,这样更有利于我们对本文的加深了解.首先要提到的就是计算机网络协议,所谓计算机网络协议,简单的说就是定义了一套标准和规则,使得不同计算机之间 ...

  9. noip 2012 疫情控制

    /* 考试的时候没想出正解 也没打暴力 时间不够了 随便yy了几种情况按出现的先后顺序处理而没有贪心 的了20分 不粘了 正解是围绕首都的儿子来搞的 显然先二分答案 对于每个限定的最大时间 我们尝试着 ...

  10. 构建可比较的对象（IComparable）

    IComparable接口 System.IComparable接口指定了一种允许一个对象可基于某些特定键值进行排序的行为. namespace System { [ComVisible(true)] ...