【easyui】 表单必填项校验通过才允许提交

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sinosoft12345/article/details/79485622

今天某功能要上线，遇到一个问题，前端使用了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");
	}
}