場景

表單中有兩個輸入框input在提交這個表單前需要對兩個輸入框進行校驗。

即點擊提交按鈕時會經過校驗的方法，此方法會post方式提交到后臺，在請求后臺成功后的回調方法中會對js變量進行賦值，進而決定是否提交此表單。

實現

html代碼

1.form元素的的action屬性為驗證通過后提交的url。

2.onsubmit屬性為返回一個驗證方法的值，如果此方法的返回值為true則提交此表單，如果為false則不提交。

3.表單中有一個表單提交的按鈕button,點擊此按鈕提交表單時會觸發onsubmit事件，會根據方法的返回值決定是否提交表單。

<form id="inAirportForm" action="${ctx}/frontPage/passFlight/GJbook.html" method="post" class="plug_form dis_none"? onsubmit="return inAirportCheck(this)"><div class="press abs w_94"><ul class="ovh rel"><li class="rel bg_white"><dl class="ovh pt_05em pb_05em"><dt class="fl ml_3 line_h_36em"><spring:message code="origin" /></dt><dd class="fr w_80 mr_3 h_in rel"><labelclass="plug_airport_btn3 dis_block ovh w_70 c_gray_777 bor_rad_05em bor_gray_ddd border bg_gray_f5f"><input name="depart" type="text" data-tip=" " data-valid="isNonEmpty"data-error=" "class="required plug_airport3 w_100 h_36em line_h_36em" value=""placeholder='<spring:message code="origin_placeholder" />' /></label></dd></dl></li><liclass="rel ovh line_h_36em abs w_20 mr_3 zindex_2 mt_3em top_0 right_0"><buttonclass="plug_change_input bg_white text_al_c w_100 mt_05em mb_05em border bor_title line_h_3em bor_rad_05em"type="button"><i class="iconfont icon-switch mr_02em"></i><spring:message code="change" /></button></li><li class="rel bg_white"><dl class="ovh pt_05em pb_05em"><dt class="fl ml_3 line_h_36em"><spring:message code="destination" /></dt><dd class="fr w_80 mr_3 h_in rel"><labelclass="plug_airport_btn4 dis_block ovh w_70 c_gray_777 bor_rad_05em bor_gray_ddd border bg_gray_f5f"><input name="arrive" type="text" data-tip=" " data-valid="isNonEmpty"data-error=" "class="required plug_airport4 w_100 h_36em line_h_36em" value=""placeholder='<spring:message code="destination_placeholder" />' /></label></dd></dl></li><li class="rel bg_white"><dl class="ovh pt_05em pb_05em"><dt class="fl ml_3 line_h_36em"><spring:message code="takeoff_date" /></dt><dd class="fr w_80 mr_3 h_in rel"><labelclass="dis_block ovh w_100 c_gray_777 bor_rad_05em bor_gray_ddd border bg_gray_f5f"><input name="date" type="text" data-tip=" " data-valid="isNonEmpty"data-error=" "class="required plug_flight_international_datetime w_100 h_36em line_h_36em" value=""readonly /><button type="button" onclick="$.Andrew_DateTime('.plug_flight_international_datetime',{trigger:false,onClose:false,minDate:$.nowDate(0),format: 'YYYY-MM-DD'})"class="abs w_20 h_in line_h_2em top_0 right_0 bor_rad_right_05em zindex_3 iconfont icon-rili text_al_c bg_title c_white"></button></label></dd></dl></li></ul><button class="btn_max wm_94 bg_title c_white mt_1em h_36em"type="submit"><spring:message code="search" /></button><buttonclass="btn_max wm_94 border bor_title bg_white c_title mt_1em h_36em"type="reset"><spring:message code="reselection" /></button></div></form>

Jquery中進行校驗的代碼

1.獲取兩個輸入框的值。

2.聲明返回值變量，用來控制方法的返回值，根據post請求的返回結果來決定此方法的返回值，

所以poist請求要通過 async:false 設置為同步。

3.返回值變量默認為false即默認是不能提交的，只有當post請求后返回的狀態碼2為200時才將其更改為true。

代碼：

function inAirportCheck(that) {var guojiStrart = $(".plug_airport3 ").val();var guojiEnd = $(".plug_airport4").val();var formAction = "${ctx}/frontPage/passAddrAirport/validateIsGuoNeiAll";var validateIsGuoNeiAll = false;$.post({async:false,url: formAction,cache: false,? //禁用緩存data:JSON.stringify({"guojiStrart":guojiStrart,"guojiEnd":guojiEnd}),contentType: "application/json",dataType: "json",success: function (result) {debuggerif ("300" == result.statusCode) {$ak.alert(result.message, {title: "信息提示",//彈窗標題button_ok: "確定",button_cancel: "取消",icon: "error", //圖標類型（warning，error，info，question，success）animateIn: "bounceInDown",//彈窗顯示效果animateOut: "bounceOutUp"});validateIsGuoNeiAll = false;}if("200" == result.statusCode){validateIsGuoNeiAll = true;}}});return ???validateIsGuoNeiAll; }

后臺SSM代碼

1.后臺接受到請求的參數并將其轉換為String類型。

2.然后調用具體的service方法查詢這兩個輸入 框的內容是否相同或者其他限制。

@ResponseBody@RequestMapping("/validateIsGuoNeiAll")public Map<String, Object> validateIsGuoNeiAll(@RequestBody Map<String, Object>? params) throws IllegalAccessException, InvocationTargetException, NoSuchMethodException{Map<String, Object> result = new HashMap<String, Object>();Object guojiStrart = params.get("guojiStrart");Object guojiEnd = params.get("guojiEnd");String guojiStrart1="";if(guojiStrart!=null){guojiStrart1=guojiStrart.toString();}String guojiEnd1="";if(guojiStrart!=null){guojiEnd1=guojiEnd.toString();}?Boolean isGuoneiAll =? this.service.validateIsGuoNeiAll(guojiStrart1,guojiEnd1);if(isGuoneiAll) {result.put("statusCode",? "300");result.put("message",? "起飛與降落機場不能都為國內機場或相同");}else {result.put("statusCode",? "200");}return result;}

具體Service實現類代碼

1.獲取兩個輸入框的內容，然后截取獲取括號中三字碼。

2.判斷這兩個三字碼相同則直接返回true。

3.然后將這兩個實體類對象根據三字碼查詢出來如果都是國內機場則返回true。

@Overridepublic Boolean validateIsGuoNeiAll(String guojiStrart, String guojiEnd) throws IllegalAccessException, InvocationTargetException, NoSuchMethodException {guojiStrart= guojiStrart.substring(guojiStrart.indexOf("(")+1,guojiStrart.length()-1);guojiEnd= guojiEnd.substring(guojiEnd.indexOf("(")+1,guojiEnd.length()-1);if(guojiStrart.equals(guojiEnd)) {return true;}PassAddrAirport passAddrAirport = dao.getAirportByThreeCode(guojiStrart);PassAddrAirport passAddrAirport2 = dao.getAirportByThreeCode(guojiEnd);if(passAddrAirport.getCountryId()==Constants.CONNTRYID_GUONEI&&passAddrAirport2.getCityId()==Constants.CONNTRYID_GUONEI) {return true;}else {return false;}}

?

總結

以上是生活随笔為你收集整理的Jquery中实现表单提交到SSM后台前进行post请求实现数据的校验的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。