form的onsubmit事件--表单提交前的验证最佳实现方式
今天遇到了一个问题,页面中include了很多的公共页面(都是没有form的),并且里面好多的地方都是自行提交的(页面中加入一个type=“submit”域,然后js中写入sumbit.click来执行提交的)。但我需要在每次提交前都要验证一下表单中的填写是否符合要求,如果我给每个提交的地方都添加验证函数的调用,那工作量就大了。
这时我得需要一个措施,就是在表单提交前统一进行验证。从body有页面关闭前的事件onbeforeunload推想到,form应该也有提交前的事件,上网一查,真有,就是onsubmit。此事件的功能就是在表单提交前自动执行指定的东西。
需要注意的是,onsubmit=“return check()”中的return是一定要加上的,不然check的返回值哪怕是false,仍然提交。也就是说,onsubmit=“return false”为不执行提交;onsubmit=“return true”或onsubmit=“return ”都执行提交;
------------------------------------------
主页面如下:
<HTML>
<HEAD>
<script type="text/javascript">
//form提交前,验证:营销活动最少选择两个
function check(){
if(验证条件不通过){
return false;
}else{
return true;//不写此返回值也行,此时就直接提交了
}
}
</script>
</HEAD>
<body onload="doOnLoad()">
<form id="queryForm" onsubmit="return check()" action="<%=request.getContextPath()%>/FocReportServlet">
<jsp:include flush="true" page="../pub.jsp"/>
<jsp:include flush="true" page="../condition.jsp"/>
<jsp:include flush="true" page="condition_marketing.jsp"/>
<jsp:include flush="true" page="contrastChart.jsp"/>
<jsp:include flush="true" page="../pagectrl.jsp"/>
...
<input type="submit" id="submit" name="submit" style="visibility:hidden"/>
<HTML>
-----------------------------------
include页面中提交方式:
<img src="<%=request.getContextPath()%>/focReport/images/control_play_blue.png" style="cursor:hand" onclick="sending.style.visibility='visible';submit.click()" alt="点击提交分析">
form的onsubmit事件--表单提交前的验证最佳实现方式的更多相关文章
- a标签指定的url,在表单提交前进行js验证的实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- javascprit form表单提交前验证以及ajax返回json
1.今天要做一个手机验证码验证的功能.需求是前端页面点击发送 短信验证码,后台接收后通过ajax返回到前端,之后前端在提交时候进行验证.思路很简单,不过做的过程还是学到不少的东西. 1.ajax请求后 ...
- jquery.form.js(ajax表单提交)
Form插件地址: 官方网站:http://malsup.com/jQuery/form/ 翻译地址:http://www.aqee.net/docs/jquery.form.plugin/jquer ...
- Form表单提交,js验证
Form表单提交,js验证 1, Onclick() 2, Onsubmit() Button标签 input (属性 submit button )标签 Input type=button ...
- springmvc下js控制表单提交(表单提交前检验,提交后获取json返回值)
这个问题我搞了四天,终于搞懂.因为对js很不熟悉.郁闷的是后台代码出错总可以设置断点调试,前端js代码出错只能通过浏览器提供一些运行数据来分析,很不习惯. 首先说下逻辑:这是一个注册功能,我希望,注册 ...
- 10天学会phpWeChat——第八天:Form类,丰富表单提交的字段类型
通过前面七讲的系列教程,我们完成了一个包含后台并自适应PC+h5移动端的文章管理模块. 在实际的生产环境中,文章投稿.商品上传等操作并不会简单局限于一个text和textarea组成的表单.在实际中, ...
- EasyUI中在表单提交之前进行验证
使用EasyUi我们可以在客户端表单提交之前进行验证,过程如下:只需在onSubmit的时候使用return $("#form1").form('validate')方法即可,E ...
- AngularJS 表单提交后显示验证信息与失焦后显示验证信息
虽然说AngularJS的实时表单验证非常有用,非常高效方便,但是当用户还没有完成输入时便弹出一个错误提示,这种体验是非常糟糕的. 正常的表单验证逻辑应该是在用户提交表单后或完成当前字段中的输入后,再 ...
- Html form 表单提交前验证
可以使用form表单的onsubmit方法,在提交表单之前,对表单或者网页中的数据进行检验. onsubmit指定的方法返回true,则提交数据:返回false不提交数据. 直接看下面的代码: 1 & ...
随机推荐
- 【第41套测试题NOIP2007】【排序】【DP】【高精度】【树】【图上路径】
先说点题外话,这两天的入学考试,炸了……语文有史以来最差,数学有史以来最差……还有4科,估计全炸……悲痛的心情,来调程序.这套题是8.31考的,从昨天晚上开始改的,因为第三题迟迟不想写,才拖到了现在. ...
- iOS - CADisplayLink与NSTimer
一.CADisplayLink简介 CADisplayLink 是一个定时器对象可以让你的应用以与显示器的刷新界面相同的频率进行绘图. 应用如果想要创建 display link ,需要提供一个目标对 ...
- C# 启动关闭.exe进程(转)
后台代码: 1 using System.Diagnostics; 2 3 protected void Button1_Click(object sender, EventArgs e)4 ...
- matlab求曲线长度
曲线段在上的弧长为采用积分所求弧长s=∫√(1+y'²)dxmatlab求出各点的导数,然后按照上式积分 clear>> x=1:0.1:10;>> y=rand(1,leng ...
- Chapter 1: A Simple Web Server
这算是一篇读书笔记,留着以后复习看看. Web Server又称为Http Server,因为它使用HTTP协议和客户端(一般是各种各样的浏览器)进行通信. 什么是HTTP协议呢? HTTP协议是基于 ...
- FastReport产品介绍及免费下载地址
公司地址: 俄罗斯 公司网址: http://www.fast-report.com 详细信息: 由技术总监Alexander Tzyganenko创建于1998年,Fast Reports, Inc ...
- 自己搭建Wifi Pineapple Mark V
创业搞得自己很累,不过一切都是值得的.抽空写下文章,确实好久未更新了. 前段时间由于项目需要,所以就折腾了下wifi pineapple.时间间隔有点久,根据回忆记录下. 淘宝货:TP-Link TL ...
- osmocom-bb中用osmocon刷入固件命令那些参数你都弄懂了吗?
转载留做备份,原文地址:http://92ez.com/?action=show&id=23341 首先找到osmocon.c这个源文件,具体目录在这里 osmocom-bb/src/host ...
- android中KSOAP2中的anytype{}问题
如果web返回为空,即空字符串的时候,KSOAP2会返回一个anytype{}这样的一个串回来,要比对下是不是这个串,如果是就返回null,从而避免查不到数据时没有相应处理. if (jsonStr. ...
- svnUbuntu下安装与使用(ZT)
1.安装包 1.$ sudo apt-get install subversion 2.创建项目目录 $ sudo mkdir /home/xiaozhe/svn $ cd /home/xiaozhe ...