添加页面+正则+三级联动

  1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
  2 <%
  3     String path = request.getContextPath();
  4     String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
  5             + path + "/";
  6 %>
  7 
  8 <!doctype html>
  9 <html lang="en">
 10 <head>
 11 <meta charset="UTF-8">
 12 <meta name="viewport"
 13     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 14 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 15 <title>新增学员</title>
 16 <link rel="stylesheet"
 17     href="./vendor/simple-line-icons/css/simple-line-icons.css">
 18 <link rel="stylesheet"
 19     href="./vendor/font-awesome/css/fontawesome-all.min.css">
 20 <link rel="stylesheet" href="./css/styles.css">
 21 <script src="./vendor/jquery/jquery.min.js"></script>
 22 <script src="./vendor/popper.js/popper.min.js"></script>
 23 <script src="./vendor/bootstrap/js/bootstrap.min.js"></script>
 24 <script src="./vendor/chart.js/chart.min.js"></script>
 25 <script src="./js/carbon.js"></script>
 26 <script src="./js/demo.js"></script>
 27 <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
 28 <script type="text/javascript">
 29     function tijiao() {
 30         var flag = true;
 31 
 32         
 33         var p1 = /^[u4e00-u9fa5]{2,}$/;
 34         if (p1.test($("#name").val())) {
 35             $("#names").empty();
 36         } else {
 37             $("#names").html("姓名至少两个中文");
 38         }
 39         
 40         /* var p2 = /^d+$/;
 41         if(p2.test($("#pidx").val())){
 42             $("#xuehao").empty();
 43         }else{
 44             $("#xuehao").html("学号必须是位数字");
 45         } */
 46         
 47         if($("#age").val()>17 && $("#age").val()<30){
 48             $("#ages").html("");
 49         }else{
 50             $("#ages").html("年龄18~30之间");
 51         }
 52         
 53         if($("#team").val()!=""){
 54             $("#s7").html("");
 55         }else{
 56             $("#s7").html("小组必选")
 57         }
 58         
 59         if($("#add").val()!=""){
 60             $("#s8").html("");
 61         }else{
 62             $("#s8").html("地址必填")
 63         }
 64 
 65         if (!$(":radio:checked").length > 0) {
 66             $("#sex").html("<font color='red'>性别必选</font>");
 67         } else {
 68             $("#sex").html("");
 69         }
 70         
 71         $(".tishi").each(function(){
 72             if($(this).html()!=""){
 73                 flag = false;
 74             }
 75         });
 76 
 77         if (flag) {
 78             var num = $("#myform").serialize();
 79             $.ajax({
 80                 url : "StudentAddServlet",
 81                 type : "post",
 82                 data : num, //参数
 83                 dataType : "text",
 84                 success : function(data) {
 85                     if (data > 0) {
 86                         alert("添加成功");
 87                         location.href = "studentShow.jsp";
 88                     } else {
 89                         alert("添加失败");
 90                     }
 91                 }
 92             })
 93         }
 94 
 95 
 96     }
 97     //查id
 98     $(function() {
 99         $.ajax({
100             url : "SelectCityServlet",
101             type : "post",
102             data : {
103                 cid : 1
104             },
105             dataType : "json",
106             success : function(data) {
107                 $.each(data, function(i, val) {
108                     $("#sheng").append("<option value='" + this.id + "'>" + this.cityname + "</option>")
109                 })
110             }
111         })
112     });
113 
114 
115     //2级联动
116     function ChooseCity(id) {
117         if (id != "") {
118             $.ajax({
119                 url : "SelectCityServlet",
120                 data : {
121                     cid : id
122                 },
123                 dataType : "json",
124                 success : function(data) {
125                     //清空之前的城市信息
126                     $("#opt1").siblings().remove();
127                     //添加城市信息
128                     $.each(data, function(i, val) {
129                         $("#shi").append("<option value='" + this.id + "'>" + this.cityname + "</option>")
130                     })
131                 }
132             })
133         } else {
134             //清理之前的城市信息
135             $("#opt1").siblings().remove();
136             //清理之前的区 县信息
137             $("#opt2").siblings().remove();
138         }
139     }
140     //3ji
141     function ChooseQu(id) {
142         if (id != "") {
143             $.ajax({
144                 url : "SelectCityServlet",
145                 data : {
146                     cid : id
147                 },
148                 dataType : "json",
149                 success : function(data) {
150                     //先清理之前的区县信息
151                     $("#opt2").siblings().remove();
152                     //添加区 信息
153                     //添加城市信息
154                     $.each(data, function(i, val) {
155                         $("#xian").append("<option value='" + this.id + "'>" + this.cityname + "</option>")
156                     })
157                 }
158             })
159         } else {
160             //清理之前的区、县信息
161             $("#opt2").siblings().remove();
162         }
163     }
164 
165     function getAdd() {
166         var pro = $("#sheng option:selected").text();
167         var city = $("#shi option:selected").text();
168         var qu = $("#xian option:selected").text();
169         $("#add").val(pro + "" + city + "" + qu);
170     }
171     
172 </script>
173 <style type="text/css">
174     span{
175         color: red;
176     }
177 </style>
178 </head>
179 <body class="sidebar-fixed header-fixed">
180     <div class="page-wrapper">
181         <div class="page-header">
182             <nav class="navbar page-header">
183                 <a href="#"
184                     class="btn btn-link sidebar-mobile-toggle d-md-none mr-auto"> <i
185                     class="fa fa-bars"></i>
186                 </a> <a class="navbar-brand" href="#"> <img src="./imgs/logo.png"
187                     alt="logo">
188                 </a> <a href="#" class="btn btn-link sidebar-toggle d-md-down-none">
189                     <i class="fa fa-bars"></i>
190                 </a>
191 
192                 <ul class="navbar-nav ml-auto">
193                     <li class="nav-item d-md-down-none"><a href="#"> <i
194                             class="fa fa-bell"></i> <span
195                             class="badge badge-pill badge-danger">0</span>
196                     </a></li>
197 
198                     <li class="nav-item d-md-down-none"><a href="#"> <i
199                             class="fa fa-envelope-open"></i> <span
200                             class="badge badge-pill badge-danger">0</span>
201                     </a></li>
202 
203                     <li class="nav-item dropdown"><a
204                         class="nav-link dropdown-toggle" href="#" role="button"
205                         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
206                             <img src="./imgs/avatar-1.png" class="avatar avatar-sm"
207                             alt="logo"> <span class="small ml-1 d-md-down-none">${cookie.name.value}</span>
208                     </a>
209 
210                         <div class="dropdown-menu dropdown-menu-right">
211                             <div class="dropdown-header">账户</div>
212 
213                             <a href="login.jsp" class="dropdown-item"> <i
214                                 class="fa fa-user"></i> 切换用户
215                             </a> <a href="#" class="dropdown-item"> <i class="fa fa-envelope"></i>
216                                 留言内容
217                             </a>
218 
219                             <div class="dropdown-header">设定</div>
220 
221                             <a href="#" class="dropdown-item"> <i class="fa fa-bell"></i>
222                                 通知事项
223                             </a> <a href="#" class="dropdown-item"> <i class="fa fa-wrench"></i>
224                                 设置
225                             </a> <a href="#" class="dropdown-item"> <i class="fa fa-lock"></i>
226                                 登出
227                             </a>
228                         </div></li>
229                 </ul>
230             </nav>
231         </div>
232         <!-- <div class="main-container"> -->
233         <div class="sidebar">
234             <nav class="sidebar-nav">
235                 <ul class="nav">
236                     <li class="nav-title">导航</li>
237 
238                     <li class="nav-item"><a href="index.jsp" class="nav-link">
239                             <i class="icon icon-speedometer"></i> 首页
240                     </a></li>
241 
242                     <li class="nav-item nav-dropdown"><a href="#"
243                         class="nav-link nav-dropdown-toggle"> <i
244                             class="icon icon-target"></i> 学员信息 <i class="fa fa-caret-left"></i>
245                     </a>
246 
247                         <ul class="nav-dropdown-items">
248                             <li class="nav-item"><a href="studentShow.jsp"
249                                 class="nav-link"> <i class="icon"></i> 学员列表
250                             </a></li>
251 
252                             <li class="nav-item"><a href="addtable.jsp"
253                                 class="nav-link active"> <i class="icon"></i> 学员加入
254                             </a></li>
255 
256                             <li class="nav-item"><a href="studentdel.jsp"
257                                 class="nav-link"> <i class="icon"></i> 学员离开
258                             </a></li>
259 
260                             <li class="nav-item"><a href="studentxiu.jsp"
261                                 class="nav-link"> <i class="icon"></i> 学员信息修改
262                             </a></li>
263                         </ul></li>
264 
265 
266                     <li class="nav-item nav-dropdown"><a href="#"
267                         class="nav-link nav-dropdown-toggle"> <i
268                             class="icon icon-energy"></i> 学员状态 <i class="fa fa-caret-left"></i>
269                     </a>
270 
271                         <ul class="nav-dropdown-items">
272                             <li class="nav-item"><a href="state_show.jsp"
273                                 class="nav-link"> <i class="icon"></i> 状态列表
274                             </a></li>
275 
276                             <li class="nav-item"><a href="state.jsp" class="nav-link">
277                                     <i class="icon"></i> 状态更改
278                             </a></li>
279                         </ul></li>
280 
281 
282                     <li class="nav-item nav-dropdown"><a href="#"
283                         class="nav-link nav-dropdown-toggle"> <i
284                             class="icon icon-graph"></i> 学员成绩 <i class="fa fa-caret-left"></i>
285                     </a>
286 
287                         <ul class="nav-dropdown-items">
288                             <li class="nav-item"><a href="tablesone.jsp"
289                                 class="nav-link"> <i class="icon"></i> 今日成绩
290                             </a></li>
291                         </ul>
292                         <ul class="nav-dropdown-items">
293                             <li class="nav-item"><a href="tablestwo.jsp"
294                                 class="nav-link"> <i class="icon"></i> 往日成绩
295                             </a></li>
296                         </ul>
297                         </li>
298                 </ul>
299             </nav>
300         </div>
301         <div class="content">
302             <form action="" method="post" id="myform">
303                 <div class="container-fluid">
304                     <div class="row">
305 
306                         <div class="col-md-10">
307                             <div class="card">
308                                 <div class="card-header bg-light">新增学员</div>
309 
310                                 <div class="card-body">
311                                     <div class="row mb-5">
312                                         <div class="col-md-4 mb-4">
313                                             <div>基本信息</div>
314                                         </div>
315 
316                                         <div class="col-md-8">
317                                             <div class="row">
318                                                 <div class="col-md-6">
319                                                     <div class="form-group">
320                                                         <label class="form-control-label">新学生学号</label> <input
321                                                             type="text" name="pid" id="pid" class="form-control">
322                                                             <span id=xuehao class="tishi"></span>
323                                                     </div>
324                                                 </div>
325 
326                                                 <div class="col-md-6">
327                                                     <div class="form-group">
328                                                         <label class="form-control-label">新学生姓名</label> <input
329                                                             type="text" name="name" id="name" class="form-control">
330                                                             <span id="names" class="tishi"></span>
331                                                     </div>
332                                                 </div>
333                                             </div>
334 
335                                             <div class="row">
336                                                 <div class="col-md-6">
337                                                     <div class="form-group">
338                                                         新学生性别:<input type="radio" name="sex" value="男"><input
339                                                             type="radio" name="sex" value="女">340                                                             <span id="sex" class="tishi"></span>
341                                                     </div>
342                                                 </div>
343                                             </div>
344 
345                                             <div class="row">
346                                                 <div class="col-md-6">
347                                                     <div class="form-group">
348                                                         <label class="form-control-label">新学生年龄</label> <input
349                                                             type="text" name="age" id="age" class="form-control">
350                                                             <span id="ages" class="tishi"></span>
351                                                     </div>
352                                                 </div>
353                                                 <div class="col-md-6">
354 
355                                                     <div class="form-group">
356                                                         <label for="single-select">新学员小组</label> <select id="team"
357                                                             name="team" class="form-control">
358                                                             <option value="">请选择小组</option>
359                                                             <option value="1">1</option>
360                                                             <option value="2">2</option>
361                                                             <option value="3">3</option>
362                                                             <option value="4">4</option>
363                                                         </select>
364                                                         <span id=s7 class="tishi"></span>
365                                                     </div>
366                                                 </div>
367                                             </div>
368                                         </div>
369                                     </div>
370 
371                                     <hr>
372 
373                                     <div class="row mt-5">
374                                         <div class="col-md-4 mb-4">
375                                             <div>家庭住址</div>
376                                         </div>
377 
378                                         <div class="col-md-8">
379                                             <div class="form-group">
380                                                 <label class="form-control-label"></label><br>省份<select
381                                                     id="sheng" class="form-control" onchange="ChooseCity(this.value)">
382                                                     <option value="">请选择省份</option>
383                                                 </select> 城市<select class="form-control" id="shi" onchange="ChooseQu(this.value)">
384                                                     <option value="" id="opt1">请选择城市</option>
385                                                 </select> 区县<select class="form-control" id="xian" onchange="getAdd()">
386                                                     <option value="" id="opt2">请选择区县</option>
387                                                 </select>
388                                                 <span id=s8 class="tishi"></span>
389                                                 <input type="hidden" name="add" id="add" value="">
390                                             </div>
391                                         </div>
392                                     </div>
393                                 </div>
394                                 <div class="card-footer bg-light text-right">
395                                     <input type="button" onclick="tijiao()" class="btn btn-primary"
396                                         value="提交">
397                                 </div>
398                             </div>
399                         </div>
400                     </div>
401                 </div>
402             </form>
403         </div>
404     </div>
405 
406     
407 
408 </body>
409 </html>
原文地址:https://www.cnblogs.com/tang0125/p/12826219.html