在项目中为一个表单（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);"的区别？

下面是简单的一小段代码：

java代码: 

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

    <INPUT value="www">

    <input type="submit" value="submit">

</form>

<SCRIPT LANGUAGE="JavaScript">

<!--

    function submitTest() {

        // 一些逻辑判断

     return false;

    }

//-->

</SCRIPT>

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

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

java代码: 

onsubmit="

    alert('haha'); // 内置函数

    submitTest();  // 自定义函数

    alert(this.tagName); // 用到了this关键词

    ......(任意多条语句)   

    return false;

"

就相当于

Form.prototype.onsubmit = function() {

    alert('haha'); // 内置函数

    submitTest();  // 自定义函数

    alert(this.tagName); // 用到了this关键词

    ......(任意多条语句)   

    return false;

};

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

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

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

    submitTest();

};

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

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

　　override方法的效果为：

Form.prototype.onsubmit = function() {

    return submitTest();

};

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

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

<html>

<head>

<script>

function checkForm(form) {

    if(form['nameId'].value == "") {  

        alert("姓名不能为空!");

        return false;

    }

    return true;

}

</script>

</head>

<body>  

<form id="formId" action="www.baidu.com" onsubmit="return checkForm(this)">

请输入姓名:<input type="text" id="nameId"/>

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

</form>

</body>

</html>

2.在js中调用onsubmit方法

function checkForm(form){

    if(form['o.NSfk'].value=="") {

        alert("实付款为空!");

        return false;

    }

    if(form['o.DFksj'].value=="") {

        alert("收款日期为空!");

        return false;

    }

    return true;  

}

function tijiao() {

    var form = document.getElementById("productFormId");

    if(form.onsubmit()==false) {

        return;

    }

    form.submit();  

}

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

在javascript中定义一个函数：
function f(){
    return false;

}

<form action="text.html" onsubmit="f()">
    <input type="text" ............/>

    <input type="submit" value="点击提交"...../>

</form>

f()返回的是false为啥点击提交的时候还能跳到text.html？
解答：
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. Java---网络编程(1)

    网络编程 相关基础概念 1.计算机网络与Internet 2.TCP/IP协议 3.Internet地址 - - -IP地址,形如xxx.xxx.xxx.xxx - - -域名系统.例如www.edu ...

  2. SANSA 上上洛可可 贾伟作品 高山流水 香炉 香插香台香具 高端商务礼品 黑色【正品 价格 图片 折扣 评论】_尚品网ShangPin.com

    SANSA 上上洛可可 贾伟作品 高山流水 香炉 香插香台香具 高端商务礼品 黑色[正品 价格 图片 折扣 评论]_尚品网ShangPin.com

  3. 衬衫面料品牌：Alumo_衬衫_男装_男装：衬衫、法式衬衫、袖扣领带、西服西裤等男士正装服饰-仕族官网

    衬衫面料品牌:Alumo_衬衫_男装_男装:衬衫.法式衬衫.袖扣领带.西服西裤等男士正装服饰-仕族官网 衬衫面料品牌:Alumo

  4. Mac OS X 程序员利器 – Homebrew安装与使用

    Mac OS X 程序员利器 – Homebrew安装与使用 Homebrew安装与使用 什么是Homebrew? Homebrew is the easiest and most flexible ...

  5. java_method_Log输出日志的方法

    package cn.com.qmhd.tools; import org.apache.log4j.Logger; import org.apache.log4j.PropertyConfigura ...

  6. spring mvc使用ClassPathXmlApplicationContext或FileSystemXmlApplicationContext和XmlWebApplicationContext类的操作其中 XmlWebApplicationContext是专为Web工程定制的。

    一.简单的用ApplicationContext做测试的话,获得Spring中定义的Bean实例(对象).可以用: ApplicationContext ac = new ClassPathXmlAp ...

  7. Linux Top 命令解析 比较详细--转

    TOP是一个动态显示过程,即可以通过用户按键来不断刷新当前状态.如果在前台执行该命令,它将独占前台,直到用户终止该程序为止.比较准确的说,top命令提供了实时的对系统处理器的状态监视.它将显示系统中C ...

  8. ubuntu 修改运行级别

    只转载了成功的, 具体参见原文  http://www.2cto.com/os/201308/237632.html 第一种方法:(内核级别的)   Sudo vi /etc/default/grub ...

  9. poj 1201 Interval （查分约束）

    /* 数组开大保平安. 查分约束: 输入的时候维护st和end 设每个点取元素di个 维护元素个数前缀和s Sbi-Sai-1>=ci 即:建立一条从ai-1到bi的边 权值为ci 表示ai到b ...

  10. 关于JS中查看当前节点的兄弟节点的使用

    <tr> <td align="center"><input style="width: 20px;" type="ch ...