場景

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

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

實現(xiàn)

html代碼

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

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

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

<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.聲明返回值變量，用來控制方法的返回值，根據(jù)post請求的返回結(jié)果來決定此方法的返回值，

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

3.返回值變量默認為false即默認是不能提交的，只有當(dāng)post請求后返回的狀態(tài)碼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.后臺接受到請求的參數(shù)并將其轉(zhuǎn)換為String類型。

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

@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",? "起飛與降落機場不能都為國內(nèi)機場或相同");}else {result.put("statusCode",? "200");}return result;}

具體Service實現(xiàn)類代碼

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

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

3.然后將這兩個實體類對象根據(jù)三字碼查詢出來如果都是國內(nèi)機場則返回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;}}

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。