第一种方式 ：

表单提交，在 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. [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)

    本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entr ...

  2. crontab 各参数详解及如何查看日志记录

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt145 crontab各参数说明: crontab [-u user] [fi ...

  3. oracle锁表问题解决方法

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp52 Oracle数据库操作中,我们有时会用到锁表查询以及解锁和kill进程 ...

  4. 最近一直在做java爬虫，有些感悟心得，分享给大家；

    首先,看完这篇文章,不能保证你成为大神,但是却可以让你懂得什么是爬虫,如何使用爬虫,如何利用http协议,侵入别人的系统,当然只是一些简单的教程,拿到一些简单的数据: 先上代码,在一步一步讲解: 这是 ...

  5. ★不容错过的PPT教程！

    IT工程师必须学会的计算机基础应用之一--PPT! 28项大神级PPT制作技术,学会后让你变成PPT高手哦!更多实用教程,请关注@IT工程师 !

  6. 集美大学网络1413第八次作业（团队四）-- 第一次项目冲刺（Alpha版本）成绩

    首先非常抱歉,刚休完假,凌晨才回来,导致这么晚发布成绩,以后旅行可以考虑带点轻便点的笔记本~ O(∩_∩)O 第一次项目冲刺结束了,可以看出来,有的团队做的很棒,也有的团队组合不是很理想,导致进度一直 ...

  7. 201521123114 《Java程序设计》第5周学习总结

    1. 本章学习总结 2. 书面作业 Q1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出结果. 不能 ...

  8. 201521123090 《Java程序设计》第4周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 继承与多态的概念与实现 父类与之类的关系 解决代码复用的办法 2. 书面作业 注释的应用 使 ...

  9. 201521123036 《Java程序设计》第3周学习总结

    本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识组织起来. 书面作业 Q1:代码阅读 public class Test1 { private ...

  10. 201521123052《Java程序设计》第2周学习总结

    1. 本周学习总结 String类一些用法 学习Array类 使用枚举 使用eclipse关联JDK源代码 使用码云管理云代码 2.书面作业 1.使用Eclipse关联jdk源代码,并查看String ...