场景
表单中有两个输入框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">
<label
class="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>
<li
class="rel ovh line_h_36em abs w_20 mr_3 zindex_2 mt_3em top_0 right_0">
<button
class="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">
<label
class="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">
<label
class="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>
<button
class="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) {
debugger
if ("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。
@Override
public 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;
}
}
