用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. 功能强大的截图工具snipaste

    一直都是用的聊天工具的截图功能,今天突然懒得登录了.想想是否有简单的截图工具 结果一搜索就找到了这个,本来没想有多少功能毕竟只是截截图而已,看到主页介绍眼前一亮.虽然不想复杂化,但是这个功能是真的不错 ...

  2. Jenkins+robotframework持续集成环境（一）

    一.安装JDK 系统环境:CentOS Linux release 7.3.1611 x86_64 GNU/Linux Jenkins是基于Java开发的持续集成系统(CI),所以运行环境必须安装JD ...

  3. 后台实战——用户登录之JWT

    https://blog.csdn.net/jackcheng_ht/article/details/52670211

  4. 02-React基础语法（2）

    一.条件渲染 语法:使用原生 js 的 if 或者 三元表达式 判断   例子:判断用户是否登录,提示:已登录.未登录 (User组件) <script type="text/babe ...

  5. Android中的消息处理机制

    安卓中的消息处理机制主要涉及到5个概念 (1)消息类:Message,可以理解成一个数据单元: (2)消息队列类:Message Queue,存放通过Hander发布的消息,处理顺序类似于队列,按照先 ...

  6. sqli-labs less-15 --> less-16

    Less-15(布尔/时间盲注) 1.判断是否存在注入点 无论是输入admin/admin’/admin” 都显示回显正常,于是执行uname=admin' and sleep(5)#&pas ...

  7. VS中关于数据库的操作

    1.数据库迁移 第一步: 第二步: 在窗口中选择项目中的EntitiyFramwork项目(与数据库连接的文件集) 第三步: 输入update-database 二:数据对比 第一步: 第二步:选择需 ...

  8. 133.在django中使用memcached

    1. 在django中使用memcached,可以在settings.py文件中DATABASES变量下面配置CACHES缓存相关配置信息,只允许本机连接memcached就可以设置LOCATION为 ...

  9. （一）Python模块化编程简介

    1 引言 众所周知,模块化编程具备很多优点,尤其在复杂项目上体现更为明显.Python模块化编程有助于开发者统筹兼顾和分工协作,并提升代码灵活性和可维护性,是编程开发者不可或缺的一项重要工具. 2 P ...

  10. 最短路-B - 六度分离

    B - 六度分离 1967年,美国著名的社会学家斯坦利·米尔格兰姆提出了一个名为“小世界现象(small world phenomenon)”的著名假说,大意是说,任何2个素不相识的人中间最多只隔着6 ...