提交表单的时候加上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="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=" 确 定 " />&nbsp;&nbsp;
            <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="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>