自己写的，有两个选项卡，一个负责上传，一个负责录入基本信息；
有必填项检查，如果有没填的项目，自动跳转到对应的选项卡；
记录下来，以后备查；
1 <!DOCTYPE html> 2 <html lang="zh" xmlns:th="http://www.thymeleaf.org" > 3 <head> 4 <th:block th:include="include :: header('新增attachment')" /> 5 6 <th:block th:include="include :: bootstrap-fileinput-css" /> 7 </head> 8 <body class="gray-bg"> 9 <div class="wrapper wrapper-content animated fadeInRight"> 10 <form class="form-horizontal m" id="form-attachment-add"> 11 12 <div class="row"> 13 <div class="col-sm-12"> 14 <div class="tabs-container"> 15 <ul class="nav nav-tabs"> 16 <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true"> 基本信息</a></li> 17 <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">上传文件</a></li> 18 </ul> 19 20 <div class="tab-content"> 21 22 <div id="tab-1" class="tab-pane active"> 23 24 <h4 th:align="right" class="form-header h4 "></h4> 25 26 <div class="row"> 27 <div class="col-sm-4"> 28 <div class="form-group"> 29 <label class="col-sm-4 control-label is-required">业务类型：</label> 30 <div class="col-sm-8"> 31 <input name="business_type" placeholder="请输入用户名称" id="business_type" class="form-control" type="text" minlength="3" maxlength="30" required/> 32 </div> 33 </div> 34 </div> 35 36 <div class="col-sm-4"> 37 <div class="form-group"> 38 <label class="col-sm-4 control-label is-required">业务ID：</label> 39 <div class="col-sm-8"> 40 <input name="business_id" placeholder="请输入用户名称" id ="business_id" class="form-control" type="text" minlength="3" maxlength="30" required/> 41 </div> 42 </div> 43 </div> 44 45 <div class="col-sm-4"> 46 <div class="form-group"> 47 <label class="col-sm-4 control-label ">测试三：</label> 48 <div class="col-sm-8"> 49 <input name="userName2" placeholder="请输入用户名称" class="form-control" type="text" maxlength="30" > 50 </div> 51 </div> 52 </div> 53 </div> 54 55 <div class="row"> 56 <div class="col-sm-4"> 57 <div class="form-group"> 58 <label class="col-sm-4 control-label ">测试四：</label> 59 <div class="col-sm-8"> 60 <input name="userName2" placeholder="请输入用户名称" class="form-control" type="text" maxlength="30" > 61 </div> 62 </div> 63 </div> 64 65 <div class="col-sm-4"> 66 <div class="form-group"> 67 <label class="col-sm-4 control-label ">测试五：</label> 68 <div class="col-sm-8"> 69 <input name="userName2" placeholder="请输入用户名称" class="form-control" type="text" maxlength="30" > 70 </div> 71 </div> 72 </div> 73 74 <div class="col-sm-4"> 75 <div class="form-group"> 76 <label class="col-sm-4 control-label ">测试六：</label> 77 <div class="col-sm-8"> 78 <input name="userName2" placeholder="请输入用户名称" class="form-control" type="text" maxlength="30" > 79 </div> 80 </div> 81 </div> 82 </div> 83 84 <div class="row"> 85 <div class="col-sm-4"> 86 <div class="form-group"> 87 <label class="col-sm-4 control-label ">测试七：</label> 88 <div class="col-sm-8"> 89 <input name="userName2" placeholder="请输入用户名称" class="form-control" type="text" maxlength="30" > 90 </div> 91 </div> 92 </div> 93 94 <div class="col-sm-4"> 95 <div class="form-group"> 96 <label class="col-sm-4 control-label ">测试八：</label> 97 <div class="col-sm-8"> 98 <input name="userName2" placeholder="请输入用户名称" class="form-control" type="text" maxlength="30" > 99 </div> 100 </div> 101 </div> 102 103 <div class="col-sm-4"> 104 <div class="form-group"> 105 <label class="col-sm-4 control-label ">测试九：</label> 106 <div class="col-sm-8"> 107 <input name="userName2" placeholder="请输入用户名称" class="form-control" type="text" maxlength="30" > 108 109 </div> 110 </div> 111 </div> 112 </div> 113 114 </div> 115 116 117 <div id="tab-2" class="tab-pane"> 118 119 <div class="ibox-content"> 120 <div class="form-group"> 121 <label class="font-noraml">多文件上传</label> 122 <div class="file-loading"> 123 <input id="file_name_real" type="file" name="file_name_real" multiple > 124 <input name="img_file" id="img_file" type="hidden" required > 125 </div> 126 </div> 127 </div> 128 </div> 129 130 </div> 131 132 </div> 133 </div> 134 </div> 135 136 137 138 </form> 139 </div> 140 141 142 143 144 <div class="row"> 145 <div class="col-sm-offset-5 col-sm-10"> 146 <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button> 147 <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button> 148 </div> 149 </div> 150 151 <th:block th:include="include :: footer" /> 152 <th:block th:include="include :: bootstrap-fileinput-js" /> 153 154 155 156 <script type="text/javascript"> 157 var prefix = ctx + "system/attachment"; 158 var img_value=''; 159 160 $(document).ready(function () { 161 $("#file_name_real").fileinput({ 162 'theme': 'explorer-fas', 163 'uploadUrl': prefix + "/upload", 164 overwriteInitial: false, 165 initialPreviewAsData: true 166 167 }); 168 169 $("#file_name_real").on("fileuploaded", function(event, data,previewId,index){ 170 171 var data = data.response; 172 image = JSON.stringify(data); 173 174 var jsonObject= jQuery.parseJSON(image); 175 img_value = img_value+','+jsonObject.img_file; 176 //alert(jsonObject.img_file); 177 $("#img_file").val(jsonObject.img_file); 178 179 }) 180 ; 181 182 }); 183 184 185 186 187 function submitHandler() { 188 var data = $("#img_file").val(); 189 var tabx=$("div ul li a"); 190 191 //----所有隐藏的 tab 标签页也参与校验 ---// 192 //$("form").validate({ignore: ":hidden", ignore: ""}); 193 194 alert(img_value); 195 196 if(img_value.length==0){ 197 alert("请先上传文件"); 198 tabx.eq(2).click(); 199 return; 200 } 201 202 203 $("form").validate({ignore: ":hidden", 204 ignore: "", 205 showErrors: function(errorMap,errorList) { 206 207 //此方法处理所有不满足校验的元素 208 var i = 0; 209 for(var key in errorMap){ 210 //alert("属性：" + key + ",值："+ errorMap[key]); 211 if(i == 0){ 212 213 // 所有tab页的内容域 214 215 var conents = $("div.tab-content"); 216 217 // 所有tab页头 218 219 var tabs = $("div.tab-pane"); 220 var index = conents.index(conents.has("[name='"+key+"']")); 221 //alert(index); 222 //tabs.eq(index).click();//---这个不成功，但是不报错 223 //---这个方法是可以一半实现 224 //tabs.eq(0).show(); 225 //tabs.eq(1).hidden(); 226 227 tabx.eq(index).click(); 228 } 229 i++; 230 } 231 this.defaultShowErrors(); 232 } 233 234 }); 235 236 237 238 if ($.validate.form("form-attachment-add")) { 239 240 // var business_type = $("#business_type").val(); 241 // alert(business_type); 242 243 $.operate.save(prefix + "/add", $('#form-attachment-add').serialize()); 244 } 245 246 247 } 248 249 250 251 252 253 254 255 </script> 256 </body> 257 258 </html>