自己写的，有两个选项卡，一个负责上传，一个负责录入基本信息；
有必填项检查，如果有没填的项目，自动跳转到对应的选项卡；
记录下来，以后备查；
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>
来源：oschina
链接：https://my.oschina.net/u/4275902/blog/4476682