码迷,mamicode.com
首页 > 其他好文 > 详细

提交表单的时候加上Ajax验证

时间:2014-07-22 00:08:36      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:style   blog   java   color   os   数据   

 

<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>
<!--          <tr>-->
<!--            <th><span class="warning">*</span>类型</th>-->
<!--            <td><input type="radio" name="diskSr.type" value="0" checked="checked"/>共享存储-->
<!--                <input type="radio" name="diskSr.type" value="1"/>单机存储-->
<!--            </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>

 

<!-- ajax验证sr是否存在 -->
        <action name="ajaxSrExist" class="com.chinac.action.disk.DiskSrAction" method="ajaxSrExist">
        </action>

    public String ajaxSrExist(){
       try {
          
          TaskResult taskResult = diskProxyTask.staticRemainStorage(poolId, srUuid);
          if(!taskResult.isFlag()){
             JSONObject jsonObj = new JSONObject();
             jsonObj.put("flag", 0);
             jsonObj.put("srExist", "底层不存在该SR!");
             response.getWriter().print(jsonObj.toString());
          }
          
      } catch(Exception e) {
         e.printStackTrace();
      }
       
       return null;
    }

提交表单的时候加上Ajax验证,布布扣,bubuko.com

提交表单的时候加上Ajax验证

标签:style   blog   java   color   os   数据   

原文地址:http://www.cnblogs.com/jingyunyb/p/3858701.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!