js 在表单提交前进行操作

最近在写页面的时候,需要手动写一些在表单进行提交前的验证操作,正好看到了2种阻止表单提交的方法,可以进行一些逻辑处理

方法一:使用return false

原生js写法:
<form id="loginForm" name="loginForm" action="login.aspx" method="post">
 <button type="submit" value="Submit" id="submit">Submit</button>
</form>

<script>
 var submitBtn = document.getElementById("submit");

 submitBtn.onclick = function (event) {
  alert("preventDefault!");
  return false;
 };
</script>

jquery写法:
<script>
$("#loginForm").submit(function(){
if(条件){
    //此处这里进行逻辑处理
}else{
    return false;
}
})
</script>

//这里发现的一个问题就是,在用jq写法的时候,只要不返回false,逻辑处理完也会自动提交表单

方法二:使用preventDefault()

<form name="loginForm" action="login.aspx" method="post">
 <button type="submit" value="Submit" id="submit">Submit</button>
</form>

<script>
 var submitBtn = document.getElementById("submit");

 submitBtn.onclick = function (event) {
  alert("preventDefault!");
  var event = event || window.event;
  event.preventDefault(); // 兼容标准浏览器
  window.event.returnValue = false; // 兼容IE6~8
 };
</script>
时间: 2024-10-11 07:46:05

js 在表单提交前进行操作的相关文章

JS控制submit表单提交前进行预览和confirm确认提交

JS控制submit表单提交前进行预览和confirm确认提交. 我们经常会遇到这样的场景,某一个form表单提交前,想知道那些checkbox的内容被选中了,如果符合则提交,如果不符合,则取消提交,很简单的代码,我就不说了,直接上代码了. <script type="text/jscript"> $(document).ready(function() { //alert($("input[name='xinjiu']:checked").val())

a标签指定的url,在表单提交前进行js验证的实现

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script type="text/javascript"> function save(){ alert("拦截a标签的href请求提交1"); <!--此处仅仅模拟表单提交前的验证过程

form的onsubmit事件--表单提交前的验证最佳实现方式

连续2天,在进行form表单包括上传表单的提交操作时,刚开始用struts2自带的上传模式与后台进行交互,但原来的页面是用html做的,不能通过国际化资源来返回后台操作的错误信息于静态的html,之后我又百度了许多ajax异步与后台交互的方法,如ajaxForm,ajaxSubmit,ajaxFileUpload等,用的是心力交瘁,各种错误抛出,然后还尝试easyui的表单提交,还是不成...这一切的目的都是为了实现异步交互,不让当前页面跳转,使用ajax实现文件上传的异步刷新,最后还是死心了,

javascprit form表单提交前验证以及ajax返回json

1.今天要做一个手机验证码验证的功能.需求是前端页面点击发送 短信验证码,后台接收后通过ajax返回到前端,之后前端在提交时候进行验证.思路很简单,不过做的过程还是学到不少的东西. 1.ajax请求后返回 returning 405 Method Not Allowed 原因是我后台返回的时候没有加上: @ResponseBody注解.加上后返回的数据是json字符串,但是js只能操作json对象.需要把json字符串转为json对象.一般的有三种方式1.JSON.parse();如 var j

【转载】[JS]让表单提交返回后保持在原来提交的位置上

有时候,在网页中点击了页面中的按钮或是刷新了页面后,页面滚动条又 会回到顶部,想看后面的记录就又要拖动滚动条,或者要按翻页键,非常不方便,想在提交页面或者在页面刷新的时候仍然保持滚动条的位置不变,最好的办法就是 在JS中用cookie记录下当前滚动条的位置,然后刷新时读取cookie就可以实现这个功能了.代码如下:<script type="text/javascript"> function Trim(strValue) { //return strValue.repla

angular js 实现表单提交时下面的table获取到表单里面的数据

angular js 实现表单提交时下面的table获取到表单里面的数据<!DOCTYPE html><html ><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css"/> <s

JavaScript - 表单提交前预览图片属性

即Preview image and its properties before upload 其实这东西网上到处都是,但并不完整. 正好我也遇到了这个问题,不仅仅是预览,还需要得到图片的属性. 于是东凑西凑整理出一个完整的版本,并根据个人的理解加上了一点点说明. (ps:感谢爆栈^^) 首先做一些准备工作,HTML方面主要是img和input标签的id:     <form>         <input type='file' id="imgFile"  />

jquery.form.js 让表单提交更优雅

jquery.form.js 让表单提交更优雅.可以页面不刷新提交表单,比jQuery的ajax提交要功能强大. 1.引入 <script src="/src/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="/src/jquery.form.js"></script> 2.使用 $(function () { va

Node.JS的表单提交及OnceIO中接受GET/POST数据的三种方法

OnceIO 是 OnceDoc 企业私有内容(文档)管理系统的底层Web框架,它可以实现模板文件.静态文件的全缓存,运行起来完全不需要I/O操作,并且支持客户端缓存优化,GZIP压缩等(只压缩一次),拥有非常好的性能,为您节约服务器成本.它的模块化功能,可以让你的Web进行分布式存储,在一个扩展包里即可包含前端.后端和数据库定义,只需通过添加/删除目录的方式就可实现功能删减,实现真正的模块化扩展.目前 OnceIO 已经开源,本文主要介绍node.js语言中的表单提交及OnceIO中接受GET