用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. QPixmap和QImage

    1.QPixmap QPixmap的设计本来就是用来加速显示,用paint绘图时用QPixmap会比其他类的效果好很多.一般小图片用QPixmap. 2.QImage 依赖软件,直接像素访问,适合大图 ...

  2. 【读书笔记】自然语言处理综述 -- 第四章 -- N元语法

    第四章 N元语法 本章开篇的两句话很有意思,代表了当时两个学派的思想和矛盾. 一句是"有史以来最伟大的语言学家"乔姆斯基说的:"句子的概率,在任何已知的对于这个术语的解释 ...

  3. Python_3

    """ Function_1: 寻找水仙花数. 水仙花数也被称为超完全数字不变数.自恋数.自幂数.阿姆斯特朗数, 它是一个3位数,该数字每个位上数字的立方之和正好等于它本 ...

  4. 数据库设计工具-powerdesigner

    一.PowerDesigner导出SQL,注释为空时以name代替 操作步骤 1. 2. 3.将Value中的内容全部替换为如下 %:COLUMN% [%National%?national ]%DA ...

  5. 请写一个java类，在任何时候都可以向它查询“你已经创建了多少个对象？”

    这个问题解决方法很简单,只要设置一个类的静态整型成员(事例中我设置的是n),初始化值为1,然后在其构造函数中添加语句使其+1(n++),这样需要查询创建了多少个对象时直接查询n的值就可以了,如下: p ...

  6. [CTSC2008]网络管理 [树剖+整体二分]

    这题的复杂度可以到达惊人的\(\log^4\)据说还能跑过去(差点没吓死我 直接二分+树剖树套树(\(n \log^4 n\)) 一个\(\log\)也不少的4\(\log\) 但是我有个\(\log ...

  7. C语言 三目运算

    C语言 三目运算 功能:为真后可根据条件选择成立两个不同的表达式 如果表达式1值为真选择表达式2 如果表达式1值为假选择表达式3 案例 #define _CRT_SECURE_NO_WARNINGS ...

  8. python里的复数complex

    复数是一个数学概念,包含了实部和虚部.在python设计语言中,可以直接定义以j为单位,也可以使用complex函数创建复数,这个函数可以传实部和虚部,也可以只传实部. 我们把形如z=a+bj(a,b ...

  9. C# extract img url from web content then download the img

    static void Main(string[] args) { WebClientDemo(); Console.ReadLine(); } static void WebClientDemo() ...

  10. python数据分析学习(2)pandas二维工具DataFrame讲解

    目录 二:pandas数据结构介绍   下面继续讲解pandas的第二个工具DataFrame. 二:pandas数据结构介绍 2.DataFarme   DataFarme表示的是矩阵的数据表,包含 ...