場景

表單中有兩個(gè)輸入框input在提交這個(gè)表單前需要對(duì)兩個(gè)輸入框進(jìn)行校驗(yàn)。

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

實(shí)現(xiàn)

html代碼

1.form元素的的action屬性為驗(yàn)證通過后提交的url。

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

3.表單中有一個(gè)表單提交的按鈕button,點(diǎn)擊此按鈕提交表單時(shí)會(huì)觸發(fā)onsubmit事件，會(huì)根據(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中進(jìn)行校驗(yàn)的代碼

1.獲取兩個(gè)輸入框的值。

2.聲明返回值變量，用來控制方法的返回值，根據(jù)post請(qǐng)求的返回結(jié)果來決定此方法的返回值，

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

3.返回值變量默認(rèn)為false即默認(rèn)是不能提交的，只有當(dāng)post請(qǐng)求后返回的狀態(tài)碼2為200時(shí)才將其更改為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: "信息提示",//彈窗標(biāo)題button_ok: "確定",button_cancel: "取消",icon: "error", //圖標(biāo)類型（warning，error，info，question，success）animateIn: "bounceInDown",//彈窗顯示效果animateOut: "bounceOutUp"});validateIsGuoNeiAll = false;}if("200" == result.statusCode){validateIsGuoNeiAll = true;}}});return ???validateIsGuoNeiAll; }

后臺(tái)SSM代碼

1.后臺(tái)接受到請(qǐng)求的參數(shù)并將其轉(zhuǎn)換為String類型。

2.然后調(diào)用具體的service方法查詢這兩個(gè)輸入 框的內(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",? "起飛與降落機(jī)場不能都為國內(nèi)機(jī)場或相同");}else {result.put("statusCode",? "200");}return result;}

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

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

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

3.然后將這兩個(gè)實(shí)體類對(duì)象根據(jù)三字碼查詢出來如果都是國內(nèi)機(jī)場則返回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)容還不錯(cuò)，歡迎將生活随笔推薦給好友。