OK!最近很忙,快过年了,也N久没来更新博客,最近在做公司的后台!然后呢!然后呢就碰到这个Submit按钮了!这里说这个肯定没多少水分,只不过希望新人在碰到和我同样的问题时不在纠结,立马有想法,我今天写这篇也算是给自己和新人留个记好!呵呵,不过实现方法很多,酱油这个方法很土,但是实用,解决问题就行了!
来场景:这样的,我在MVC JQuery验证表单后,然后验证不管是对是错,我艹!这个Submit都给我把表单给提交到Controller了,呃对了还好点错了我.....下来看代码:
@using (Html.BeginForm("ProdPromotionEdit", "Product", FormMethod.Post)) { <table cellpadding="6" cellspacing="1" border="0" width="100%"> ..................Table里的无用代码省略.................... <tr bgcolor="#fafafa"> <td align="right"> 促销专区: </td> <td class="special_site"> <select name="Area" id="Area" class="search_select"> <option value="">--请选择--</option> @foreach (var item in ViewBag.Area) { if (item.Key == "1") { <option value="@item.Key" selected="selected">@item.Value</option> } else { <option value="@item.Key">@item.Value</option> } } </select> </td> </tr> ..................Table里的无用代码省略.................... <input type="Submit" name="Save" value="保存" id="Save" class="default_button" onclick="check()" /> </td> </tr> </table> }
OK!上面就是我的View界面,然后就是JQ的验证,脚本如下:
function check() { var value = parseFloat($("#PromotionValue").val()); if (isNaN(value) == true) { alert("请输入*****"); $("#PromotionValue").focus(); return false; } var MarketPrice = parseFloat($("#MarketPrice").val()); if (isNaN(MarketPrice) == true) { alert("请输入*****"); $("#MarketPrice").focus(); return false; } var StartDate = $("#StartDate"); if (StartDate.val() == "") { alert("请输入*****"); StartDate.focus(); return false; } var EndDate = $("#EndDate"); if (EndDate.val() == "") { alert("请输入*****"); EndDate.focus(); return false; } var Total = $("#Total"); if (Total.val() == "") { alert("请输入******"); Total.focus(); return false; } var QuantityLimits = $("#QuantityLimits"); if (QuantityLimits.val() == "") { alert("请输入******"); QuantityLimits.focus(); return false; } }
一些简单的验证,然后呢!我偏偏写一些错的东西,然后执行脚本了,执行完成后,还是给提交了Product 控制器(Controller)的ProdPromotionEdit 方法(Action),然后就错了呗!你懂的。。。然后原因就是Submit即便执行完了JQ脚本还会提交表单,它是提交了,但是我的希望是JQ脚本验证不通过的时候,它就不提交!这才是我最终的目标!其实各位大虾,前辈在这里可能一笑而过,因为实现的办法太多了!什么AJAX,什么什么的,反正很多了!
但是酱油在这里想到一个很土的办法也实现了,来共享给即将要用的新同学!当时是这么想的,input的Type="Submit"会给咱验证了还提交,那不爽啊!不要了,在直接把Type选"Button"吧!然后在验证完成后,在Document.Submit!嘿嘿,起初是这么想,然后在就干呗!然后View就成了下面:
@using (Html.BeginForm("ProdPromotionEdit", "Product", FormMethod.Post)) { <table cellpadding="6" cellspacing="1" border="0" width="100%"> ..................Table里的无用代码省略.................... <tr bgcolor="#fafafa"> <td align="right"> 促销专区: </td> <td class="special_site"> <select name="Area" id="Area" class="search_select"> <option value="">--请选择--</option> @foreach (var item in ViewBag.Area) { if (item.Key == "1") { <option value="@item.Key" selected="selected">@item.Value</option> } else { <option value="@item.Key">@item.Value</option> } } </select> </td> </tr> ..................Table里的无用代码省略.................... <input type="button" name="Save" value="保存" id="Save" class="default_button" onclick="check()" /> </td> </tr> </table> }
然后在JQ脚本里在加了一句话,就实现了:JQ脚本如下:
function check() { var value = parseFloat($("#PromotionValue").val()); if (isNaN(value) == true) { alert("请输入*****"); $("#PromotionValue").focus(); return false; } var MarketPrice = parseFloat($("#MarketPrice").val()); if (isNaN(MarketPrice) == true) { alert("请输入*****"); $("#MarketPrice").focus(); return false; } var StartDate = $("#StartDate"); if (StartDate.val() == "") { alert("请输入*****"); StartDate.focus(); return false; } var EndDate = $("#EndDate"); if (EndDate.val() == "") { alert("请输入*****"); EndDate.focus(); return false; } var Total = $("#Total"); if (Total.val() == "") { alert("请输入******"); Total.focus(); return false; } var QuantityLimits = $("#QuantityLimits"); if (QuantityLimits.val() == "") { alert("请输入******"); QuantityLimits.focus(); return false; } $(function () { $("#Save").click(function () { $(this.form).submit() }) }) }
然后呢!最初的目标达到了,呵呵!这个办法很土,但是能实现最初的目标和自己的想法就是OK的! 呵呵!写这个常识呢,就是把MVC的Submit改成。。。。。应该这么说把input 里的Submit 改成 button,然后在验证的脚本加一个submit!然后就可以实现,这个算是移花接木不,还是乾坤大挪移! 哈哈,开玩笑了,就是这么个小小的土方法的分享,希望对新朋友有点点思路即可,多谢各位前辈的指点,非常谢谢!马上过年,祝各位前辈,朋友新年快乐!