javascript 表单验证和button跳转 - 深海的小鱼儿 - 博客园
我们设计一个表单，在本地客户端验证，如果验证不对的话，就不允许提交，非得全部验证完整正确才允许跳转
1、javascript 代码：
&html& 
&head& 
&meta http-equiv=&Content-Type& content=&text/ charset=gbk&& 
&title&JavaScript禁止提交表单&/title& 
&script type=&text/javascript&& 
function getObj(id){ 
var Obj = document.getElementById(id). 
return O 
function check(){ 
if(getObj(&test&)==&&){ 
       alert(&文本框输入为空，不能提交表单！&); 
        document.getElementById(&test&). 
      //false:阻止提交表单
     } 
&/script& 
&/head& 
&body& 
&form action=&index.htm& method=&post& onsubmit=&return check()&& 
    &input type=&text& name=&test& id=&test&& 
    &input type=&submit& value=&提交&& 
&/form& 
&/body& 
2、jquery代码
&html& 
&head& 
&meta http-equiv=&Content-Type& content=&text/ charset=gbk&& 
&script type=&text/javascript& src=&/sunchis/script/jquery-1.3.2.js&&&/script& 
&script type=&text/javascript&& 
$(document).ready(function(){ 
    $(&:submit[id=tijiao]&).click(function(check){ 
var val = $(&:text[id=test]&).val(); 
if(val==&&){ 
            alert(&文本框输入为空，不能提交表单！&); 
            $(&:text[id=test]&).focus(); 
            check.preventDefault();//此处阻止提交表单
        } 
    }); 
&/script& 
&title&jQuery禁止提交表单&/title& 
&/head& 
&body& 
&form action=&index.htm& method=&post&& 
    &input type=&text& name=&test& id=&test&& 
    &input type=&submit& id=&tijiao& value=&提交&& 
&/form& 
&/body& 
3、超连接跳转
我们在超连接的时候，常常连接到一个jsp或者Action,比如:
     这样做会有一个问题：在test.jsp中，除你传递的param1和param2参数外,你用request.getParamter()取任何原来页面的表单元素都会为空，这是因为这种方式会产生新的request生命周期，在这个request中只会包含超连接后跟随的?param1这种参数， 因此我的建议是如果不是很简单的页面跳转（比如回登陆页面之类的），尽量不要用这种超连接方式。
4、即传参又提交表单
如果确实既要像上述第一种方式传参数，又要提交表单的话，可以采取如下方式：
XXX在脚本中如下处理：
function commonSubmit(url)
    form1.action=&/jsp/managerAction.do?&+
    form1.submit();
提交到Action和jsp是一样的原理，但要记住
中method=post不能少，否则它只提交表单而不传param参数了（正好和第一种相反:) )
5、js和java变量互传
在jsp中经常会遇到把js变量赋给java变量，或者将java变量赋给js变量的情况，在此将通用的处理方法小结如下：
java变量传给js好办，var a =&&;注意要将引号&&加上；js变量给java稍微复杂点，一般是在表单中用一个
的隐藏表单元素，然后在脚本中将js变量值赋给它:
var jsParamValue=
form1.jsParam.value=jsParamV
然后就可以request.getPrameter(&jsPrama&);来取得js变量值了
6、Action中request不会丢掉
不知大家有没有注意到这个好处，Struts架构中是由一个ActionServlet来作为MVC的控制器角色，jsp页面提交后request是传到ActionServelt中的， 而ActionServlet将根据struts-config.xml中的配置调用相应的Action的方法，并将从jsp中获得的request传给Action类，这样request的生命周期是连续的，即你在jsp中提交了表单，在Action中执行了方法，再回到jsp页面，用request.getParamter()取jsp页面的表单元素值会发现它还在，这对于页面下拉列表等选择项防止复位是一个很好实现方法。
7、传参时参数有空格的情况
    如果你提交form时带参数，比如form1.action=&/jsp/Action.do?param1=&+value1,注意如果value1中带有空格的话，你在Action中request.getParameter(&param1&);取得的只是空格前的值，因此如果有这种带空格的参数在传递时，个人建议是将其转化为特定的字符串，value1=value1.replaceAll(& &,&%NULL%&);然后在Action中将其转回来：request.getParamter(&param1&).replaceAll(&%NULL%&,& &);
8、form-data属性
如果你要用来上传文件的话，注意在一个表单中如果有enctype=&multipart/form-data&属性的话，是不能接收除type=file外的其他表单元素类型的。 即如果你把和放在同一表单中，而该表单有enctype=&multipart/form-data&的话，request.getParamter取text的值会为空， 这个问题的最简单的解决方法是将单独放一个表单，上传文件时只提交该表单即可。
9、jsp中开模式对话框的方式
与Swing中类似，jsp中也有模式对话框这一概念，你可以将一个jsp页面放到一个模式对话框中打开，这样在模式对话框消失前，原jsp页面将不可操作。特别适合父页面中要做一些额外的选择操作，而又没必要跳转到新的jsp页面的时候，
开模式对话框的方式参考如下：
Function open() {
  If(window.showModelDialog())
      Var returnValue = showModelDialog(“/jsp/模式窗口包含的jsp页面路径”;
               help=0;status=0;center=dialogWidth=100dialogHeight=100pt”);
   }之前项目中使用的表单提交方式& & 使用form()方法可以将提交事件脱离submit按钮，绑定到任何事件中& & 复制代码代码如下:& & function addSubmit(){& & $('#addForm').form('submit', {& & url : _basePath + '/@Controller/@RequestMapping',& & onSubmit : function() {& & if(boolean){//放置能否提交的判断条件& & $.messager.show({& & title:'提示',msg:'不符合保存条件',& & showType:'fade',style.:{right:'',bottom:''}& & });& &//阻止表单提交& & }& & return $('#addForm').form('validate');//判断required项是否全部有值& & },& & success : function(data) {& & var bj = jQuery.parseJSON(data);//将返回的JSON转化为所需对象（ResponseData）& & if (!obj.success) {//判断返回的ResponseData对象中标示状态的属性值& & $.messager.show({& & title:'提示',msg:'保存失败',& & showType:'fade',style.:{right:'',bottom:''}& & });& & } else {& & $.messager.show({& & title:'提示',msg:'保存成功',& & showType:'fade',style.:{right:'',bottom:''}& & });& & $("#addWin").window("close");//关闭提交pwkk& & query();//刷新结果集& & }& & }& & });& & }& & 今天在《锋利的jQuery》中又读到这样一种提交方式，使用ajax封装了表单内容用post提交& & 复制代码代码如下:& & $("#btn").click(function() {& & $.get("get.php", {username:$("#username").val(), password:$("#password").val()}, function(data, textStatus) {//将表单中的数据逐条取出后封装上传& & $("#target").html(data);//将返回值填充至页面中& & });& & });& & 而后有一个简化版，使用serialize()方法序列化& & 复制代码代码如下:& & $("#btn").click(function() {& & $.get("get.php", $("#form").serialize(), function(data, textStatus) {//将表单中的数据逐条取出后封装上传& & $("#target").html(data);//将返回值填充至页面中& & });& & });& & serialize()方法可以自动编码，而且除表单之外的如checkbox等对象也可以使用其进行转换& & 同时还有serializeArray()方法可以将元素序列化后返回数组形式的JSON对象，而非JSON字符串& & 即无需使用jQuery.parseJSON()方法进行转换& & 返回值可直接使用类似$.each()等方法进行操作使用& & 您可能感兴趣的文章:jquery将一个表单序列化为一个对象的方法探讨JQUERY JSON的反序列化类 using问题的解决方法jquery将一个表单序列化为一个对象的方法jQuery-serialize()输出序列化form表单值的方法基于jQuery的一个扩展form序列化到json对象Jquery 组合form元素为json格式,asp.net反序列化jquery ajax,ashx,json的用法总结asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码用jQuery与JSONP轻松解决跨域访问的问题jquery的ajax和getJson跨域获取json数据的实现方法jquery ajax跨域解决方法(json方式)jquery教程ajax请求json数据示例js/jquery解析json和数组格式的方法详解JQuery处理json与ajax返回JSON实例代码Jquery解析json数据详解Jquery getJSON方法详细分析jquery遍历筛选数组的几种方法和遍历解析json对象jquery ajax jsonp跨域调用实例代码jQuery中使用Ajax获取JSON格式数据示例代码基于jquery异步传输json数据格式实例代码jQuery插件jQuery-JSONP开发ajax调用使用注意事项jquery ajax中使用jsonp的限制解决方法jquery+json实现数据列表分页示例代码jquery序列化form表单使用ajax提交后处理返回的json数据& & QQ空间
百度搜藏更多& & Tags：验证表单 提交方式 序列化表单& & 复制链接收藏本文打印本文关闭本文返回首页& & 上一篇：Jquery下EasyUI组件中的DataGrid结果集清空方法& & 下一篇：如何书写高质量jQuery代码(使用jquery性能问题)& & 相关文章jQuery MD5加密实现代码JQuery中根据属性或属性值获得元素(6种情况获取方法)Jquery中给animation加更多的运作效果实例jQuery contains过滤器实现精确匹配使用方法jQuery插件 selectToSelect使用方法jQuery 三击事件实现代码jQuery EasyUI 开源插件套装 完全替代ExtJSJquery实现自定义窗口随意的拖拽模拟jQuery ajax服务器端与客户端通信的代码用Jquery实现可编辑表格并用AJAX提交到服务器修改数据& & 文章评论& & 最 近 更 新& & jQuery弹出(alert)select选择的值jQuery-Easyui 1.2 实现多层菜单效果的代jQuery 版本的文本输入框检查器Input CheJQuery实现简单时尚快捷的气泡提示插件50个比较实用jQuery代码段jquery next nextAll nextUntil siblingsjquery.ui.progressbar 中文文档jQuery :first选择器使用介绍jquery 设置元素相对于另一个元素的top值jquery购物车实时结算特效实现思路& & 热 点 排 行& & jquery JSON的解析方式jquery 将disabled的元素置为enaJQuery中each()的使用方法说明jquery $(document).ready() 与wjQuery.Autocomplete实现自动完成Jquery插件之多图片异步上传jquery ajax提交表单数据的两种方jquery加载页面的方法(页面加载完JQuery上传插件Uploadify使用详解jquery validate.js表单验证的基
声明：该文章系网友上传分享，此内容仅代表网友个人经验或观点，不代表本网站立场和观点；若未进行原创声明，则表明该文章系转载自互联网；若该文章内容涉嫌侵权，请及时向
上一篇：下一篇：
相关经验教程
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.004 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益免费-学习-分享资源javascript 阻止表单提交_HTML5+CSS3_共享资源
由于本网站使用的html5和css3,建议使用谷歌（chrome）、火狐（firefox）、360浏览器、IE9以上的版本访问本网站。
javascript 阻止表单提交
众所周知，在表单中加上onsubmit=&&可以阻止表单提交。&
下面是简单的一小段代码：&
&1&&&form action=&index.jsp& method=&post& onsubmit=&submitTest();&&&
&2&&& & &INPUT value=&www&&&
&3&&& & &input type=&submit& value=&submit&&&
&4&&&/form&&
&6&&&SCRIPT LANGUAGE=&JavaScript&&&
8&&& & function submitTest() { &9&&& & & & // 一些逻辑判断&
&10&& & &&
&11&& & } &12&//--&&
&13&&/SCRIPT&&
大家判断像上面的写法，点击submit按钮该表单是否提交？&
实际情况是表单正常提交，若想它不提交，应该将
&1&&form action=&index.jsp& method=&post& onsubmit=&submitTest();&&&
&1&&form action=&index.jsp& method=&post& onsubmit=&return submitTest();&&
原来onsubmit属性就像是&form&这个html对象的一个方法名，其值（一字符串）就是其方法体，默认返回true；&
(责任编辑：admin)
描述：众所周知，在表单中加上onsubmit=可以阻止表单提交。...
描述：您或许正在或准备参与一个WepApp项目，您或许正在Google搜索mob...
描述：一、主体结构 header 页面头部，不同与head/head aside 边栏 nav 外部...javascript return false 不能阻止form提交_百度知道
javascript return false 不能阻止form提交
sp&script type=&确认&quot.innerHTML = &输入正确&text&sp&&/t1& 10) {
alert(&quot:bold&#39？ 该怎么改; 10) { onblur=&&&gt.getElementById(&输入错误&).getElementById(&/span&&请输入&&gt？& } } & value=&checkf()&/f()& i &input type=&/input type=&span&br /&form action=&&&&#47.charCodeAt(i) &);&lt:& }
else { document.getElementById(&&& onclick=&&& 255) { len += 2 } else { len++ } };&&gt.span id=& i++) { if (
if (b &&&/);title&html&);head&&br &#47，还是会跳转 请问错在哪儿;head&t1&quot:green'&body&&&/font-不能少于10个字符& id=&span&/ }&script&
len = 0;form&sp&text/&lt返回&lt.innerHTML = &&body&span style='&gt.php&
for (var i = 0;
function f(len) {
var str =//html&&&gt.
function checkf() {
var b = f();javascript&/span style='br /
if (len &title&&submit&quot
提问者采纳
if&&);&&&&&&type=&&&&&&&type=&quot:/&}&&input&&&sp&&function&&return&&/form&&&id=&len&text&&sp&&{&&t1&body&&nbsp.getElementById(&quot.getElementById(&else&&&&&&f(len)&&/script&&}}&=&&&&checkf()&{&&&&/&}&&确认&{&
&&span&/html&script&&;return&&var&&=&不能少于10个字符&&&b&&&&&test&&br&&0;/span&&&&/&br&&+=&& &&action=&quot:green'br&请输入&var&{&&&input&{&&0;meta&&&);&&&/span&&}&&style='&&&&&&value=&for&&&i&len&&&&&/title&&}function&{&style='document.&&span&2&);&&&&f()&html&&&checkf();&&&&&&&else&&&&&id=&&nbsp.innerHTML&nbsp.innerHTML&(var&if&&return&&/&&/body&charset=utf-8&&
&&;&&/&submit&title&head&alert(&t1&&&&&&&=&(b&&{&&);&type=&&(str!DOCTYPE&255)&}&nbsp.&&&&&&&lt&&{&&}&}&i++)&&=&&&nbsp:bold'form&len++&&&{&&&onclick=&&&&
&&=&&&&i&text/javascript&quot.charCodeAt(i)&f();10)&str&/span&&return&&&&=&&&&&&&&HTML&&&nbsp.getElementById(&/head&&&&&sp&(len&font-输入错误&10)& &if&&&&输入正确&&&&&else&span&/&&&&onblur=&&nbsp.php&quot
提问者评价
其他类似问题
按默认排序
其他7条回答
t1&/form&&/&gt.php&form action=&sp&text&f()&br /&请输入&/span&input type=&quot，你必须在返回后再用return将验证结果返回给表单元素; value=&quot在 checkf 函数中的return值并没有被表单元素接受：&确认&return checkf()&&& onblur=& id=&submit&&&input type=&&span id=&&/& onsubmit=&quot
&input type=&button& value=&确认& onclick=&checkf()&/&function checkf() {
var b = f();
if (b & 10) {
alert(&输入错误&); }
document.getElementById(&给form取个id&).submit();
}}&input type=&submit& value=&确认& onclick=&checkf()&/&是个提交按钮
不管判断通过不通过都要提交一次的
也就是说 return false 无法阻止其提交吗？ 那换submit换成button 能阻止跳转吗？
是的，不能阻止首先你要知道submit和button的区别
submit就是个提交按钮，你给加个方法只是他提交之前会运行的方法
却不能阻止他提交
，而botton就是个按钮，没有任何作用，而你给他加了个方法，让他判断一下，再自己去提交，就可以实现你想要的结果了
event.preventDefault()return false是jquery的用法, 如果你没有用jquery的话, 请使用上面那个
居然有人说return false 是jQuery的用法。。。。难道jQuery不是JS？应该这么写：onlickc=&checkf();& 也就是说应该把return false写在onclick属性值里，而不是函数里，超链接的效果同理！
那如果 判断通过 提交会被阻止吗？
看你的意思是想使用if语句判断提交与否，那你就别给&input type=&submit& /&添加Onclick事件了，给form添加一个Onsubmit事件监听，把属性值改为checkf()。那你这么写把：&form action=&test.php& onsubmit=&return checkf()&&.....&input type=&submit& value=&提交& /& &/form&
不建议用submit.1&input type=&button& value=&确认& onclick=&checkf()&/&2&form action=&index.php& id=&myForm&&3function checkf() {
var b = f();
if (b & 10) {
alert(&输入错误&); } else{myForm.submit();}}
&input type=&submit& value=&确认& onClick=&return checkf()& /&
在form里面加onSubmit=“check()”
javascript的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁jQuery 阻止form表单提交 请大侠指点
[问题点数：40分，结帖人GOD_cheng]
jQuery 阻止form表单提交 请大侠指点
[问题点数：40分，结帖人GOD_cheng]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
相关帖子推荐：
2014年2月 总版技术专家分月排行榜第二2013年4月 总版技术专家分月排行榜第二
2014年11月论坛优秀版主
2014年2月 总版技术专家分月排行榜第二2013年4月 总版技术专家分月排行榜第二
2014年11月论坛优秀版主
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。