提交表单的时候加上Ajax验证
一、
<form id="fo" action="addDiskSr.action" method="post" > <table> <tr> <td colspan="2" class="subtitle" >存储服务器内容录入</td> </tr> <tbody> <tr> <th width="30%"><span class="warning">*</span>所在集群</th> <td> <select id="poolId" name="diskSr.pool.id" onchange="changeHost()"> <option value="">==请选择==</option> <s:iterator value="poolList" var="pool"> <option value="${pool.id }">${pool.name }</option> </s:iterator> </select> </td> </tr> <tr style="display:none" id="hostTr"> <th width="30%"><span class="warning">*</span>所属计算节点</th> <td> <select name="diskSr.host.id" id="diskSrHostListSelect"> <option value="-1">==请选择==</option> <s:iterator value="hostList" var="host"> <option value="${host.id }">${host.nameLabel }</option> </s:iterator> </select> </td> </tr> <tr> <th width="30%"><span class="warning">*</span>uuid</th> <td> <input type="text" class="inputText" id="srUuid" name="diskSr.uuid" style="width:300px;"/> </td> </tr> <tr> <th><span class="warning">*</span>存储服务器名称</th> <td><input type="text" class="inputText" name="diskSr.nameLabel" /></td> </tr> <tr> <th><span class="warning">*</span>存储服务器IP:</th> <td><input type="text" class="inputText" name="diskSr.serverIp" /></td> </tr> <tr> <th><span class="warning">*</span>存储总空间</th> <td><input type="text" class="inputText" name="diskSr.space" />GB</td> </tr> <tr> <th><span class="warning">*</span>预留空间</th> <td><input type="text" class="inputText" name="diskSr.spaceHold" />GB</td> </tr> <tr> <th><span class="warning">*</span>服务器账号</th> <td><input type="text" class="inputText" name="diskSr.serverUser" /></td> </tr> <tr> <th><span class="warning">*</span>服务器密码</th> <td><input type="text" class="inputText" name="diskSr.serverPsw" /></td> </tr> <tr> <th><span class="warning">*</span>用途</th> <td><input type="radio" name="diskSr.useType" value="1" checked="checked"/>系统盘 <input type="radio" name="diskSr.useType" value="2"/>数据盘 <input type="radio" name="diskSr.useType" value="3"/>系统盘+数据盘 </td> </tr> </tbody> <tr> <td colspan="2" class="toolbar"> <input type="submit" class="inputButton" value=" 确 定 " /> <input type="button" class="inputButton" value=" 取 消 " onclick="window.location.href='diskSrList.action'"/> </td> </tr> </table> </form>
<script type="text/javascript"> $(document).ready(function(){ $("#fo").validate({ rules: { "diskSr.pool.id":{required:true}, "diskSr.host.id":{required:true}, "diskSr.uuid":{required:true}, "diskSr.nameLabel":{required:true,maxlength:64}, "diskSr.serverIp":{required:true,maxlength:32}, "diskSr.space":{required:true,max:60000,number:true}, "diskSr.spaceHold":{required:true,max:60000,number:true}, "diskSr.serverUser":{required:true}, "diskSr.serverPsw":{required:true}, "diskSr.status":{required:true} }, errorPlacement: function(error, element){ error.appendTo(element.parent()); }, errorElement:"span" }); $('#fo').submit(function(){ var tabSrUuid = $("#srUuid").val(); var tabPoolId = $("#poolId").val(); var flag = false; $.ajax({ type: "POST", url: "ajaxSrExist.action", dataType: "json", data:{poolId:tabPoolId,srUuid:tabSrUuid}, async: false, success: function(json){ if(json.flag == 0){ alert(json.srExist); flag = false; }else{ flag = true; } } }); return flag; }); }); </script>
二、jQuery的validation插件在表单提交前Ajax验证
$(document).ready(function(){ $("#fo").validate({ rules: { "vm.uuid":{required:true} }, messages:{ "vm.uuid":{required:"必填"} }, errorPlacement: function(error, element){ error.appendTo(element.parent()); }, errorElement:"span", submitHandler:function(form){ var tabpoolId = $("#tabpoolId").val(); var tabuuid = $("#tabuuid").val(); var flag = false; //网络验证 //底层、数据库存在与否验证 $.ajax({ url : 'vmCheck_ajax.action', type : 'post', async : false, dataType : 'json', data:{poolId:tabpoolId,vmuuid:tabuuid}, success : function(json) { if(json.flag == 0){ flag = true; }else if(json.flag == 1){ alert(json.vmExist); flag = false; }else if(json.flag == 2){ alert(json.vmExist); flag = false; }else if(json.flag == 3){ alert(json.vmExist); flag = false; } } }); if(flag){ form.submit(); } } }); });
<form id="fo" action="toEntryVmSecond.action" method="post"> <table id="tabSelect"> <tr> <td colspan="13" class="subtitle">云服务器信息</td> </tr> <tbody> <tr> <th width="20%"><span class="warning">*</span>云服务器UUID</th> <td colspan="13"><input type="text" class="inputText" name="vm.uuid" id="tabuuid" style="width:250px;"/></td> </tr> <tr> <th><span class="warning">*</span>所属集群</th> <td colspan="13"><select id="tabpoolId" name="poolId" onchange="changeTemplate(this.value);"> <s:iterator value="poolList" var="pool"> <option value="${pool.id }">${pool.name }</option> </s:iterator> </select></td> </tr> <tr> <th><span class="warning">*</span>云主机模板</th> <td colspan="13"><select id="tabtemplatelist" name="templateListId"> <s:iterator value="templateList" var="templatelist"> <option value="${templatelist.id }">${templatelist.template.name}</option> </s:iterator> </select></td> </tr> <tr> <th><span class="warning">*</span>所属商户</th> <td colspan="13"><select id="tabagentid" name="vm.agentId"> <s:iterator value="agentList" id="agent"> <option value="${id}">${name}</option> </s:iterator> </select> <input type="hidden" id="tabagentName" value="${agentList[0].name}"/> </td> </tr> <tr> <td colspan="13" class="toolbar"> <!-- <input type="button" value="下一步" class="inputButton" onclick="nextStep();" /> --> <input type="submit" value="下一步" class="inputButton" /> </td> </tr> </tbody> </table> </form>
