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

本文主要是介绍【easyui】 表单必填项校验通过才允许提交，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

这篇关于【easyui】 表单必填项校验通过才允许提交的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---