第一种方式 ：

表单提交，在 form 标签中增加 onsubmit 事件来判断表单是否提交成功

<script type="text/javascript">
function validate(obj) {
    if (confirm("提交表单?")) {
        alert(obj.value);
        return true;     } else {
            alert(obj.value);
            return false;
            }
    }
</script>
<body>
    <form action="XXX" onsubmit="return validate(document.getElementByIdx_x('myText'));">
        <!—参数的这种写法注意下-->
        <input type="text" id="myText"/>
        <input type="submit" value="submit"/>
    </form>
</body>

第二种方式 ：

通过 button 按钮来触发表单提交事件 onclick=”submitForm();”,会忽略掉其他标签中的属性， 比如 form 标签中的 onsubmit 属性就失效了。这时为了进行表单验证，可以将验证代码放在 submitForm();方法中进行验证。

<script type="text/javascript">
function validate() {
    if (confirm("提交表单?")) {
        return true;
        } else {
            return false;
    }
}

function submitForm() {
    if (validate()) {
        document.getElementByIdx_x("myForm").submit();
        }
    }
</script>
<body>
    <form action="XXXX" id="myForm">
        <input type="text"/>
        <input type="button" value="submitBtn" onclick="submitForm();"/>
        <!—也 可以使用 document.getElementByIdx_x(“该按钮的 id”).click();来执行 onclick 事件 -->
    </form>
</body>

第三种方式 ：

将 onsubmit 事件放在 submit 标签中，而不是 form 标签，此时表单验证失效，点击提交按 钮直接提交

<script type="text/javascript">
function validate() {
    if (confirm("提交表单?")) {
            return true;
        } else {
            return false;
        }
    }
</script>
<body>
    <form action="XXXX">
        <input type="text"/>
        <input type="submit" value="submit" onsubmit="return validate()"/>
    </form>
</body>

第四种方式 ：

为 submit 按钮添加上 onclick 事件，其中该事件用于提交表单的验证，功能类似在 form 标 签中增加了 onsubmit 事件一样

<script type="text/javascript">
    function validate() {
        if (confirm("提交表单?")) {
                return true;
            } else {
                return false;
                }
        }
</script>
    <body>
        <form action="XXXX">
            <input type="text"/>
            <input type="submit" value="submit" onsubmit="return validate()"/>
        </form>
    </body>

JS表单提交的几种方式的更多相关文章

  1. asp.net mvc表单提交的几种方式

    asp.net MVC中form提交和控制器接受form提交过来的数据 MVC中form提交和在控制器中怎样接受 1.cshtml页面form提交2.控制器处理表单提交数据4种方式方法1:使用传统的R ...

  2. Form 表单提交的几种方式

    简单的总结一下form表单提交的几种方式:1.最简单的方式 就用form的submit提交方式,这种提交方式是不需要回调函数的   这种方式最近到一个form提供action路径后台接受就可以< ...

  3. flask表单提交的两种方式

    一.通用方式 通用方式就是使用ajax或者$.post来提交. 前端html <form method="post" action="/mockservice&qu ...

  4. 表单提交的3种方式，http post的contentType

    application/x-www-form-urlencoded:窗体数据被编码为名称/值对.这是标准的编码格式.这是默认的方式 multipart/form-data:窗体数据被编码为一条消息,页 ...

  5. form表单提交的几种方法

    form表单提交的几种方法 <form id="myform" name="myform" method="post" onsubmi ...

  6. 原生JS 表单提交验证器

    转载:http://www.cnblogs.com/sicd/p/4613628.html 一.前言 最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过“缜密”的讨论后,我们决定 不用外部 ...

  7. js表单提交,面向对象

    一.js表单验证之后再提交 1.普通按钮onclick函数调用表单的submit()函数 <input type=button name="submit1" value=&q ...

  8. vue---阻止默认表单提交的三种方法

    vue在做表单提交的时候,需要用到一些自定义的验证规则,这个时候就需要阻止表单默认的提交方式. 方法一:直接阻止 <form id="form" @submit=" ...

  9. js表单提交，判断文本框，用户名密码是否为空，JS表单检测!

    当表单提交时先触发验证的js代码,当验证表单的方法返回true时才会提交表单返回false则不提交数据<script type="text/javascript">fu ...

随机推荐

  1. Scala中柯里化函数

    高阶函数转一阶函数: val add1 = (x: Int) => x + 5 def add2(x: Int)(y: Int) = x + y //传入一个参数转换为一阶函数 def add3 ...

  2. MySQL的JOIN（二）：JOIN原理

    表连接算法 Nested Loop Join(NLJ)算法: 首先介绍一种基础算法:NLJ,嵌套循环算法.循环外层是驱动表,循坏内层是被驱动表.驱动表会驱动被驱动表进行连接操作.首先驱动表找到第一条记 ...

  3. Maven（一）初识Maven

    前言 在这之前一直都有去看关于Maven的相关介绍,但是没有到真正要用的时候,自己总是以为懂了.其实真的感觉Maven并没有想象的那么简单! 那我们该怎么去学习maven呢?接下来我将从: 初步认识m ...

  4. 再起航，我的学习笔记之JavaScript设计模式20(策略模式)

    策略模式 策略模式(Strategy):将定义的一组算法封装起来,使其相互之间可以替换.封装的算法具有一定的独立性,不会随客户端变化而变化. 其实策略模式在我们生活中可应用的地方还是比较多的,比如在商 ...

  5. MyEclipse使用（一）

    一.配置 window ----> preferences (1)配置 JDK java--->Installed JREs --> Add ---> JRE name --- ...

  6. C语言中复数运算及调用blas,lapack中复数函数进行科学计算

    C语言中常用的数据类型主要int, float ,double ,char 等,但在科学运算中复数扮演着重要角色.这里讲下C语言中的复数运算以及如何调用blas,lapack库中的复数函数来进行科学计 ...

  7. unix下的文件和目录详解以及操作方法

    前言:unix下一切东西都是文件,一共有7种不同的文件,前一篇博客已经讲解的很清楚了,不懂的可以看看这里.当然,博主知道有些朋友比忙,没时间看,那我就简单点讲讲这7中文件都有哪些吧. 文件类型包括在s ...

  8. python 每日一练： 读取log文件中的数据，并画图表

    之前在excel里面分析log数据,简直日了*了. 现在用python在处理日志数据. 主要涉及 matplotlib,open和循环的使用. 日志内容大致如下 2016-10-21 21:07:59 ...

  9. 第二次项目冲刺（Beta阶段）5.20

    1.提供当天站立式会议照片一张 会议内容: ①检查前一天的任务情况,心得分享以及困难分析. ②制定新一轮的任务计划. 2.每个人的工作 (1)工作安排 队员 今日进展 明日安排 王婧 #42文件分类改 ...

  10. 201521123002《Java程序设计》第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 1.List中指定元素的删除(题目4-1) 1.1 实验总结 1.提交函数实 ...