第一种方式 ：

表单提交，在 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. vue系列之动态路由【原创】

    开题 最近用vue来构建了一个小项目,由于项目是以iframe的形式嵌套在别的项目中的,所以对于登录的验证就比较的麻烦,索性后端大佬们基于现在的问题提出了解决的方案,在看到他们的解决方案之前,我先画了 ...

  2. python爬虫scrapy框架——人工识别登录知乎倒立文字验证码和数字英文验证码(2)

    操作环境:python3 在上一文中python爬虫scrapy框架--人工识别知乎登录知乎倒立文字验证码和数字英文验证码(1)我们已经介绍了用Requests库来登录知乎,本文如果看不懂可以先看之前 ...

  3. PHP初入,基础知识点分享（a标签&表格的嵌套&文字的处理）

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  4. 【Alpha】第七次Daily Scrum Meeting

    GIT 一.今日站立式会议照片        二.会议内容 1.讨论送礼物的方法和对象,使功能更加完善. 2.对于程序还存在的问题提出自己的看法,尽量让功能更加的饱满. 三.燃尽图 四.遇到的困难 能 ...

  5. 结对编程1-基于GUI的四则运算生成器

    201421123016郑怀勇     201421123017康建灿 程序代码 / 康建灿 一.需求分析 记录用户的对错总数. 程序退出再启动的时候,能把以前的对错数量保存并在此基础上增量计算. 有 ...

  6. 201521123073 《Java程序设计》第5周学习总结

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

  7. 201521123005 《java程序设计》 第二周学习总结

    1. 本周学习总结 ·java中的字符串及String的用法 "=="比较的是两字符串的地址,而不是内容 String类的对象是不可变的,创建之后不能进行修改 ·数组Array的用 ...

  8. 201521123098 《Java程序设计》第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 1. 在编写类时,要有写构造函数和各变量的getter()和setter()方法的习惯: 2. 同步操作时要记得在 ...

  9. 201521123039《Java程序设计》第十三周学习总结

    1. 本周学习总结 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? 下面是IP地 ...

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

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