用submit来提交表单，然后在js中监听submit方法，用ajax提交表单最后阻止submit的自动提交。

在标准浏览器中，阻止浏览器默认行为使用event.preventDefault()，而在IE6~8中，使用returnValue属性来实现。

<html>

<head>

    <script type="text/javascript" src="jquery-1.9.0.min.js"></script>

</head>

<body>

    <form action="" id='submitform'>

        username: <br>

        <input type="text" name="username" value="" required="required"> <br>

        password: <br>

        <input type="text" name="password" value="" required="required"> <br><br>

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

    </form>

    <script type="text/javascript" language="javascript">

        $("#submitform").on("submit", function(event) {

            $.ajax({

                ......

            });

            //阻止submit表单提交

            event.preventDefault();

            //或者return false

            //return false;

        });

    </script>

</body>

</html>

用html5自带表单验证 并且用ajax提交的解决方法(附例子)的更多相关文章

  1. [H5表单]html5自带表单验证体验优化及提示气泡修改

    慕课网之前录制的视频,js/jquery各种宽高的理解和应用,最近终于上线了.还有一个html5左侧导航没有上线!最近慕课网系列课程让我录制一个html5表单验证的课程.今天就稍微说一下表单验证!另外 ...

  2. html5自带表单验证

    起因:今天无意中发现chrome的input框自带表单验证!于是就去试试firefox,惊奇的发现也有自带的验证提示,只不过两者的样式不一样 chrome中的样子: firefox中的样子: 发散:具 ...

  3. html5自带表单验证-美化改造

    神奇的代码 暂且叫做html5.css /* === HTML5 validation styles === */ .myform select:required, .myform input:req ...

  4. discuze回放提示“抱歉,您的请求来路不正确或表单验证串不符,无法提交”

    不知从哪里看到文章,但是实用: 背景:discuze就单纯的录制一个注册脚本,日志中没有报错,在报告中就提示"抱歉,您的请求来路不正确或表单验证串不符,无法提交"",以下 ...

  5. H5自带表单验证

    HTML5自带的表单验证 转载:https://www.web-tinker.com/article/20781.html HTML5对表单元素提供了patern属性,它接受一个正则表达式.表单提交时 ...

  6. HTML5 web Form表单验证实例

    HTML5 web Form 的开发实例! index.html <!DOCTYPE html> <html> <head> <meta charset=&q ...

  7. HTML5新增的表单验证功能

    一.HTML5表单的特点: HTML5 表单增加了许多内置的控件和控件属性 XHTML 中需要放在 form 之中的诸如 input/button/select/textarea 等标签元素,在 HT ...

  8. JS表单验证插件(支持Ajax验证)

    自己编写了一个表单验证插件,支持ajax验证,使用起来很简单. 每个需要验证的表单元素下面有一个span标签,这个标签的class有一个valid表示需要验证,如果有nullable则表示可为空:ru ...

  9. 表单验证—html5新特性表单验证

    一.表单 <body> <section id="register"> <div><img src="images/logo.j ...

随机推荐

  1. Upx 压缩go编译的程序 frp

    1. frp 程序占用大 .路由器 不够空间 2. UPX 下载地址       https://github.com/upx/upx/releases/ 3.  压缩命令  upx.exe -9 C ...

  2. [大数据技术]datax的安装以及使用

    1.datax简述 DataX 是阿里巴巴集团内被广泛使用的离线数据同步工具/平台,实现包括 MySQL.Oracle.SqlServer.Postgre.HDFS.Hive.ADS.HBase.Ta ...

  3. PHP Magic Method Setter and Getter

    <?php /* Magic method __set() and __get() 1.The definition of a magic function is provided by the ...

  4. 解决问题:当redis服务端断开的时候`进程会崩溃(转载6哥笔记)

    package main import ( "fmt" "github.com/astaxie/beego/logs" "github.com/gar ...

  5. 从Windows10中彻底删除【3D对象】文件夹

    Remove "3D object" folder from My Computer Windows Registry Editor Version 5.00 [-HKEY_LOC ...

  6. 2020.01.19【NOIP提高组】模拟比赛-1.水池,2.数字排序,3.球星,4.钻石交易 总结反思

    水池 比赛时 我最讨厌这种数学类题了,我首先想到了这几种情况,设\(jl[][]\)表示两点之间弧的距离,从F到G可以由 F->G F->B->A->G F->A-> ...

  7. oracle add_month函数

    本文转自:https://blog.csdn.net/lanchengxiaoxiao/article/details/7695057 add_months 函数主要是对日期函数进行操作,举例子进行说 ...

  8. kali linux中mariadb加上密码

    kali自带mysql.2019.4 中带得是:MariaDB.据说跟Mysql差不多.简单用了一下发现root用户可以不要密码进入Mysql! 这极不习惯,不输入密码感觉好像少了点什么.这肯定是权限 ...

  9. 使用hexo+github搭建免费个人博客详细教程(转载）

    https://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html 1.上传文档的hexo常用命令 2.输入hexo ...

  10. IntelliJ IDEA 2019年最新版2019.3.1 安装激活教程【最强，可用至2100、2089年】

    IntelliJ IDEA 2019年最新版 永久激活教程 本文包括最新[2019.3.1 & 1.3]激活 和[2018.3.2]激活 说明:①2019.3.②2019.1.③2018.3版 ...