第一种方式 ：

表单提交，在 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. WPF DEV实现手风琴效果

    说明 最近用WPF+DevExpress做项目时,需要做一个类似手风琴的效果,效果的界面如下.因为没有现成的控件,需要自定义模板,所以写了一个Demo和大家分享,项目中可以根据实际情况使用.如果你用不 ...

  2. 关于时间对象Date()

    今天使用XCUI开发过程中发现另一个诡异的问题,就是年月日初始化之后默认时分秒的问题. 问题发生在重构交互日志页面的时候,原来的老页面是这样的: 进入了交互日志页面之后,默认会初始化时间为今天的凌晨到 ...

  3. 学习之-ASP.NET MVC Filter

    MVC Filter 是典型的AOP应用,对MVC框架处理客户端请求注入额外的一些逻辑,如日志记录.缓存处理.异常处理和权限验证,性能检测(横切关注点),而这些逻辑通常与主要业务无关,被独立分开作为公 ...

  4. Domain Driven Design

    在Spring官网的第一个tutorial中看到了这种 设计模式 Domain Driven Design 找到了篇介绍这个得文章: What is Domain Driven Design? &qu ...

  5. 团队作业8——第二次项目冲刺（Beta阶段）5.21

    1.当天站立式会议照片 会议内容: 本次会议为第三次会议 本次会议在陆大楼2楼召开,本次会议内容: ①:检查总结第二次任务完成情况 ②:布置第三次任务的详细分工 ③:规定完成时间是在第四次任务之前 ④ ...

  6. 201521123097《Java程序设计》第八周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 1.本次作业题集集合 public static List return str; } pub ...

  7. 201521123096《Java程序设计》第八周学习总结

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

  8. 201521123037 《Java程序设计》第6周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 1.2 可选:使用常规方法总结其他上课内容. 接口与抽象类 ...

  9. 201521123111《Java程序设计》第10周学习总结

    1. 本章学习总结 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容 线程不是程序 线程必须在程序对应的进程中运行 一个进程中可以同时执行多个线程,这些线程可以完成不同的功能. 2. 书面 ...

  10. 201521123026《JAVA程序设计》第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...