解决未对 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;
}
});
});