今天某功能要上線，遇到一個問題，前端使用了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"  onclick="saveUkeyInfo();">儲存</a>
				<a href="javascript:;"class="easyui-linkbutton"  onclick="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");
	}
}