解决未对 form 表单数据进行校验直接就可以提交的问题

今天遇到了一个问题,完成登录和注册功能时,使用 easyui 的 required:true,validType:'length[6,18]' 等等各种校验 textbox 时,点击登录或者注册按钮,未输入任何值也能提交,然后后台报错。后来发现自己使用的按钮类型为 submit,而且 easyui 并不主动提供校验 form 表单所有数据之后再提交的方法,但是有校验所有数据是否符合要求的方法。

解决这个问题首先要清楚,submit 类型的按钮点击后直接就提交 form 表单了,但是 button 类型的按钮不会。所以解决思路是:可以先把 submit 改成 button,然后给这个按钮添加一个点击事件,在这个点击事件中判断所有数据是否都符合自己定义的校验规则,符合的话将 button 改为 submit,否则不改变,就一直无法提交。具体参考代码如下:
例一:

<div style="margin:20px 100px 10px 100px"> <input type="button" class="easyui-linkbutton" id="regButton" value="完成注册" style="padding:5px 0px;width:100%;font-size:20px;"> </div>
$("#regButton").click(function(){ //registered为表单id。所有数据符合校验要求时,isValid 返回true。 var isValid = $("#registered").form('validate'); if(isValid){ $("#regButton").attr("type","submit"); } });

例二:

<div id="organizationDlg" class="easyui-dialog" style="width:380px;padding:10px 20px" closed="true" buttons="#dlg-buttons" modal="true" cache="false" collapsible="false" closable="true"> <form id="organizationFM" method="post" novalidate> <table> <tr> <td>上级机构</td> <td style="padding:5px"> <input name="orgParentName" id="orgParentName" style="width: 200px;height: 20px" readonly="readonly"/> <a href="javascript:void(0)" class="l-btn l-btn-plain" group="" id="lookForSelectOrganization"> <span class="l-btn-left"><span class="l-btn-text icon-search l-btn-icon-left"></span></span></a> <input name="orgParentNo" id="orgParentNo" type="hidden"/> <input name="selectType" id="selectType" type="hidden"/> </td> </tr> <tr> <td>全称</td> <td style="padding:5px"> <input name="orgFullName" id="orgFullName" class="easyui-validatebox" data-options="required:true,validType:'length[2,30]'" style="width: 200px;height: 20px"/> <input name="id" id="id" type="hidden"/> </td> </tr> <tr> <td>简称</td> <td style="padding:5px"> <input name="orgAbr" id="orgAbr" class="easyui-validatebox" data-options="required:true,validType:'length[2,20]'" style="width: 200px;height: 20px"/> </td> </tr> <tr> <td>状态</td> <td style="padding:5px"> <select name="orgStcd" id="orgStcd" style="width: 200px;height: 20px"> <option value="1">未营业</option> <option value="2">正常营业</option> <option value="3">暂停营业</option> <option value="4">终止营业</option> </select> </td> </tr> <tr> <td>编号</td> <td style="padding:5px"> <input name="orgNo" id="orgNo" class="easyui-validatebox" data-options="required:true,validType:'length[2,20]'" style="width: 200px;height: 20px"/> </td> </tr> <tr> <td>序号</td> <td style="padding:5px"> <input name="sort" id="sort" class="easyui-validatebox" data-options="required:true,validType:'length[2,20]'" style="width: 200px;height: 20px"/> </td> </tr> <tr> <td>开创时间</td> <td style="padding:5px"> <input type="text" name="orgCreateTime" id="orgCreateTime" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH🇲🇲ss'})" class="txt Wdate" style="width:200px;"/> </td> </tr> <tr> <td>停业时间</td> <td style="padding:5px"> <input type="text" name="orgStopTime" id="orgStopTime" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH🇲🇲ss'})" class="txt Wdate" style="width:200px;"/> </td> </tr> <tr> <td>备注</td> <td style="padding:5px"> <textarea name="remark" id="remark" placeholder="暂无备注信息" style="width: 200px; height:40px;"></textarea> </td> </tr> </table> </form> </div> <div id="dlg-buttons"> <a href="javascript:void(0)" id="saveOrganization" class="easyui-linkbutton" iconCls="icon-ok">保存</a> <a href="javascript:void(0)" id="cancelOrganization" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#organizationDlg').dialog('close')">取消</a> </div>
//保存信息 $("#saveOrganization").off("click").on("click", function () { if (!$("#orgFullName").val()) { $.messager.alert('提示', '全称不能为空!', 'warning'); return; } if (!$("#orgAbr").val()) { $.messager.alert('提示', '简称不能为空!', 'warning'); return; } if (!$("#orgNo").val()) { $.messager.alert('提示', '编号不能为空!', 'warning'); return; } /** * create by: qiankunpingtai * create time: 2019/3/21 14:56 * website:https://qkpt.top/mnt/ * description: * 提交时需要对表格内容进行校验,校验通过后提交后台处理 */ var isValid = $("#organizationFM").form('validate'); if(!isValid){ return; } var objInfo = $("#organizationFM").serializeObject(); $.ajax({ type: "post", url: url, dataType: "json", data: ({ info: JSON.stringify(objInfo) }), success: function(res) { if(res) { if(res.code!=200){ $.messager.alert('提示', res.msg, 'error'); return; } $('#organizationDlg').dialog('close'); //加载完以后重新初始化 $('#tt').tree('reload'); } }, //此处添加错误处理 error: function () { $.messager.alert('提示', '保存机构信息异常,请稍后再试!', 'error'); return; } }); });