【easyui】 表單必填項校驗通過才允許提交
阿新 • • 發佈:2019-01-28
今天某功能要上線,遇到一個問題,前端使用了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"); } }