今天某功能要上线,遇到一个问题,前端使用了easyui,在修改页面是存在必填项校验的提示,但是点击提交按钮,依然可以提交成功,我看了一下代码,原来是未做必填项校验的处理:
原来的代码:
jsp页面
<form class="openform" id="ukeyInfoForm" method="post" action=''>
<table class="tableForm">
<tr>
<td class="thTitle">端口编号</td>
<input name="id" id="idForUpdUkey" type="hidden" />
<td><input name="portNo" id="portNoEdit" class="easyui-textbox" readonly /></td>
</tr>
<tr>
<td class="thTitle">企业名称</td>
<td>
<input name="companyName" id="companyNameEdit" data-options="required:true,validType:['maxLength[\'企业名称\',100]']" class="easyui-textbox" />
</td>
</tr>
<tr>
<td class="thTitle">金融机构</td>
<td>
<input id="editBankCodeList" data-options="required:true,validType:['maxLength[\'金融机构\',50]']" class="easyui-combobox " />
<input name="bankName" id="bankNameEdit" type="hidden"/>
<input name="bankCode" id="bankCodeEdit" type="hidden"/>
</td>
</tr>
<tr>
<td class="thTitle">币种</td>
<td>
<input id="editCurrencyList" data-options="required:true" class="easyui-combobox " />
<input name="currency" id="currencyEdit" type="hidden"/>
</td>
</tr>
<tr>
<td class="thTitle">备注</td>
<td>
<input name="memo" id="memoEdit" class="easyui-textbox" data-options="validType:['maxLength[\'备注\',100]']"/>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<a href="javascript:;"class="easyui-linkbutton" οnclick="saveUkeyInfo();">保存</a>
<a href="javascript:;"class="easyui-linkbutton" οnclick="cancelSaveUkeyInfo();">取消</a>
</td>
</tr>
</table>
js页面
function saveUkeyInfo(){
$.ajax({
url: baseUrl+'/receiptcrawler?random=' + Math.random(),
type: 'POST',
dataType: 'json',
data: $('#ukeyInfoForm').serialize(),
success: function (result) {
if(result.code =='001') {
$.messager.show({
title : '提示',
msg : result.desc
});
$.modalDialog.handler.dialog('destroy');
$.modalDialog.handler = undefined;
}else{
$.messager.show({
title : '提示',
msg : result.desc
});
}
}
});
}
只修改js页面,修改后的代码为
function saveUkeyInfo(){
if($("#ukeyInfoForm").form('validate')){
$.ajax({
url: baseUrl+'/receiptcrawler?random=' + Math.random(),
type: 'POST',
dataType: 'json',
data: $('#ukeyInfoForm').serialize(),
success: function (result) {
if(result.code =='001') {
$.messager.show({
title : '提示',
msg : result.desc
});
$.modalDialog.handler.dialog('destroy');
$.modalDialog.handler = undefined;
}else{
$.messager.show({
title : '提示',
msg : result.desc
});
}
}
});
}else{
$.messager.alert('操作提示','存在校验项未通过!',"warning");
}
}