如何组织表单的默认提交?【亲测有效】

最近做的一个项目,我分到的部分有表单验证。点击了提交按钮,但我并不想让他跳转页面去提交。于是经过各种百度,各种 stackoverflow,各种抱大神腿之后,有了以下解决办法:

重点就是阻止 form 的 submit() 默认提交行为,一种方法用 return false,另一种是 event.preventDefault(); 两种方法都可以,但却又有不同,要根据你的实际情况选择。有什么不同呢,看完文章就告诉你。

首先 html 里 code 如下:

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>form</title>
 6 </head>
 7 <body>
 8     <form action="www.baidu.com" method="post" id="myForm" novalidate> //novalidate是为了防止 HTML5 表单执行原生的校验,从而只执行你自定义的验证。
 9         <input type="name" id="name" required>
10         <input type="submit" value="submit">
11     </form>
12
13     <script src="scripts/jquery.min.js"></script>
14     <script src="scripts/demo.js"></script>
15 </body>
16 </html>

js 里 code 如下:

1 $(‘#myForm‘).submit(function(event){
2     if (!$(‘#name‘).val()) {
3     alert(‘name 不能为空‘);
4     event.preventDefault();
5     };
6 })

当表格 name 的值为空时,弹出提示框,并阻止跳转。代码演示:http://plnkr.co/edit/CZ9TYOMKXheCvq7fMQ7f?p=preview

当然你也可以用 return false 来阻止,代码如下:

1 $(‘#myForm‘).submit(function(event){
2     if (!$(‘#name‘).val()) {
3     alert(‘name 不能为空‘);
4     return false;
5     };
6 })

代码演示:http://plnkr.co/edit/CZ9TYOMKXheCvq7fMQ7f?p=preview

如果你用的是什么 angularjs 框架之类的,只需要往这个代码上加 ng-controller 、ng-app 之类的就可以了。

最后说一下 return false  和 event.preventDedault() 的区别:如果你在阻止了表单的提交行为之后,还想干点别的,那就用 event.preventDefault(),比如给空 input 加一个红色边框提醒用户之类的,因为 return false 之后的代码不会执行。如果什么也不想干,那两者就没有区别了,由你任性!

红色边框代码:

1 $(‘#myForm‘).submit(function(event){
2     if (!$(‘#name‘).val()) {
3     alert(‘name 不能为空‘);
4     event.preventDefault();
5     $(‘#name‘).css(‘border-color‘,‘red‘);
6     }
7 })

ps:event.preventDefault();是个什么鬼?http://www.w3school.com.cn/jsref/event_preventdefault.asp

看什么?!评论关注啊!

时间: 2024-10-05 04:40:41

如何组织表单的默认提交?【亲测有效】的相关文章

struts2 文件的上传下载 表单的重复提交 自定义拦截器

文件上传中表单的准备 要想使用 HTML 表单上传一个或多个文件 须把 HTML 表单的 enctype 属性设置为 multipart/form-data 须把 HTML 表单的method 属性设置为 post 需添加 <input type=“file”> 字段. Struts 对文件上传的支持 在 Struts 应用程序里, FileUpload 拦截器和 Jakarta Commons FileUpload 组件可以完成文件的上传. 步骤:1. 在 Jsp 页面的文件上传表单里使用

利用JS实现表单的自动提交

今天需要将一个chat整合到客户的网站上去,实现网站的注册用户登录本网站之后点击某个链接能够直接登录到chat上去.我保留了chat原有的登录界面,采用JS技术当页面跳转过来的时候自动填充表单,并自动提交表单,从而实现网站用户无需再次登录即可进入chat.具体代码实现如下 JS代码 <script> //取得cookie值 function getCookie(name){ var arr,reg=new RegExp("(^| )"+name+"=([^;]*)

表单的重复提交,解决方案

表单的重复提交,解决方案: 第一种情况:在提交表单时,如果网速较差,可能会导致点击提交按钮多次: - 解决方法:点击提交按钮之后,使按钮不可用.通过js完成: <script type="text/javascript"> window.onload = function(){ //获取按钮的对象 var btn = document.getElementById("btn"); //为按钮绑定单击响应函数 btn.onclick = function(

前端开发入门到实战:css实现修改浏览器自动填充表单的默认样式

当表单中存在input[password]的时候,采用submit方式提交.就会触发浏览器自动填充表单.比如chrome自动填充后,淡×××输入框代替了背景样式,看起来有些怪异. ?那么如何通过css实现取消浏览器自动填充表单的默认样式呢? 解决方法一: 当input文本框是纯色背景的,可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的×××背景:如: input:-webkit-autofill { -webkit-box-shadow: 0 0

web前端入门到实战:css实现修改浏览器自动填充表单的默认样式

当表单中存在input[password]的时候,采用submit方式提交.就会触发浏览器自动填充表单.比如chrome自动填充后,淡慌色输入框代替了背景样式,看起来有些怪异. 那么如何通过css实现取消浏览器自动填充表单的默认样式呢? 解决方法一: 当input文本框是纯色背景的,可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的慌色背景:如: web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新

Form表单Ajax系列化提交数据

页面上有一个商品的颜色尺码二维输入框,输入完毕之后需要把数据进行提交,点击立即购买则进行页面的跳转,通过form表单将数据提交到后台,而点击添加到购物车的话,则会通过ajax进行数据的提交,页面不进行跳转.前台样式: 下面是form表单: <form id="cartForm" action="${ctx}/cart/save" method="post"> <div class="product-page-optio

android post方式上传文件(模拟表单格式数据提交)

表单提交内容为: POST /upload.php?zp_id=ab46ca6d703e3a1580c1c9b8b3a8fb39 HTTP/1.1Accept: image/gif, image/jpeg, image/pjpeg, image/pjpeg, application/x-ms-application, application/x-ms-xbap, application/vnd.ms-xpsdocument, application/xaml+xml, application/v

jquery序列化form表单使用ajax提交后处理返回的json数据

这篇文章主要介绍了jquery序列化form表单,使用ajax提交后处理返回的json数据的示例,需要的朋友可以参考下 1.返回json字符串: ** 将一个字符串输出到浏览器 */    protected void writeJson(String json) {        PrintWriter pw = null;        try {            servletResponse.setContentType("text/plain;charset=UTF-8"

使用文档对象在页面上创建学生信息表。 信息表包括学号、姓名、性别、电子邮件、联系电话、个人主页和联系地址, 信息表内容通过表单输入,提交前先使用正则表达式进行验证,联系地址不能超过20个字符, 每输入一名学生的信息,提交后,表格增加一行,表格不能被选择、复制。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <!--        描述:使用文档对象在页面上创建学生信息表.        信息表包括学号.姓名.性别.电子邮件.联系电话.个人主页和联系地址,        信息表内容通过表单输入,提交前先使用