jQuery 表單驗證插件——Validation(基礎)
這個插件不錯，是用jquery寫的。能進行表單驗證。我喜歡它的緣由是由於javascript
1.他有自帶的驗證規則css
2.你能夠本身寫驗證規則html
3.能夠經過ajax與後臺交互，與後臺數據比較。最後返回結果！我在表單中要驗證是否是存在這個帳號的時候須要與後臺進行交互，使用ajax是最好不過的！html5
使用的方法很簡單：我簡單說一下「java
1.寫jsp頁面，js文件jquery
2.引入的這個類庫，一個是juquery的類庫文件，一個是validation的文件-----》http://pan.baidu.com/s/1c04nN5ugit
3.在jsp頁面寫類庫連接，中引入類庫，ajax
給一個demo，我是直接在個人sshdemo中截取出來的，你理解原理就能夠了bootstrap
jsp頁面canvas
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 <!--引入struts標籤 --> 3 <%@ taglib prefix="s" uri="/struts-tags"%> 4 <% 5 String path = request.getContextPath(); 6 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 7 %> 8 9 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 10 <html> 11 <head> 12 <meta charset="utf-8" /> 13 <title>AirPlane| searcPlane</title> 14 <!-- ================== BEGIN BASE CSS STYLE ================== --> 15 <link href="http://fonts.useso.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet"> 16 <link href="<%=basePath %>/BacksAdmin/assets/plugins/jquery-ui/themes/base/minified/jquery-ui.min.css" rel="stylesheet" /> 17 <link href="<%=basePath %>/BacksAdmin/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" /> 18 <link href="<%=basePath %>/BacksAdmin/assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" /> 19 <link href="<%=basePath %>/BacksAdmin/assets/css/animate.min.css" rel="stylesheet" /> 20 <link href="<%=basePath %>/BacksAdmin/assets/css/style.min.css" rel="stylesheet" /> 21 <link href="<%=basePath %>/BacksAdmin/assets/css/style-responsive.min.css" rel="stylesheet" /> 22 <link href="<%=basePath %>/BacksAdmin/assets/css/theme/default.css" rel="stylesheet" id="theme" /> 23 <!-- ================== END BASE CSS STYLE ================== --> 24 <!-- ================== BEGIN PAGE LEVEL CSS STYLE ================== --> 25 <link href="<%=basePath %>/BacksAdmin/assets/plugins/jquery-jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" /> 26 <link href="<%=basePath %>/BacksAdmin/assets/plugins/bootstrap-calendar/css/bootstrap_calendar.css" rel="stylesheet" /> 27 <link href="<%=basePath %>/BacksAdmin/assets/plugins/gritter/css/jquery.gritter.css" rel="stylesheet" /> 28 <link href="<%=basePath %>/BacksAdmin/assets/plugins/morris/morris.css" rel="stylesheet" /> 29 <link href="<%=basePath %>/BacksAdmin/assets/plugins/DataTables/css/data-table.css" rel="stylesheet" /> 30 <!-- ================== END PAGE LEVEL CSS STYLE ================== --> 31 <!-- ================== BEGIN BASE JS ================== --> 32 33 <script src="<%=basePath %>/BacksAdmin/assets/plugins/pace/pace.min.js"></script> 34 <!-- END HEAD --> 35 <!--js框架--引入jquery，由於bootstrap使用了jquery，因此要在它前面引入--> 36 <script src="<%=basePath%>/resource/jquery/jquery-1.11.3.min.js"></script> 37 <!--css框架--引入bootstrap--> 38 39 <!-- 引入本身的js/css --> 40 <style> 41 /*標籤選擇器*/ 42 input[type="text"] { 43 width: 60%; 44 } 45 </style> 46 <!-- ================== END BASE JS ================== --> 47 </head> 48 <body> 49 <!-- begin #page-loader --> 50 <div id="page-loader" class="fade in"> 51 <span class="spinner"></span> 52 </div> 53 <!-- end #page-loader --> 54 <!-- begin #page-container --> 55 <div id="page-container" class="fade page-sidebar-fixed page-header-fixed"> 56 <!-- begin #header --> 57 <div id="header" class="header navbar navbar-default navbar-fixed-top"> 58 <!-- begin container-fluid --> 59 <div class="container-fluid"> 60 <!-- begin mobile sidebar expand / collapse button --> 61 <div class="navbar-header"> 62 <a href="index.html" class="navbar-brand"><span class="navbar-logo"></span>Color Admin</a> 63 <button type="button" class="navbar-toggle" data-click="sidebar-toggled"> 64 <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"> 65 </span> 66 </button> 67 </div> 68 <!-- end mobile sidebar expand / collapse button --> 69 <!-- begin header navigation right --> 70 <ul class="nav navbar-nav navbar-right"> 71 <li> 72 <form class="navbar-form full-width"> 73 <div class="form-group"> 74 <input type="text" class="form-control" placeholder="Enter keyword" /> 75 <button type="submit" class="btn btn-search"> 76 <i class="fa fa-search"></i> 77 </button> 78 </div> 79 </form> 80 </li> 81 <li class="dropdown"><a href="javascript:;" data-toggle="dropdown" class="dropdown-toggle f-s-14"> 82 <i class="fa fa-bell-o"></i><span class="label">5</span> </a> 83 <ul class="dropdown-menu media-list pull-right animated fadeInDown"> 84 <li class="dropdown-header">Notifications (5)</li> 85 <li class="media"><a href="javascript:;"> 86 <div class="media-left"> 87 <i class="fa fa-bug media-object bg-red"></i> 88 </div> 89 <div class="media-body"> 90 <h6 class="media-heading"> 91 Server Error Reports</h6> 92 <div class="text-muted f-s-11"> 93 3 minutes ago</div> 94 </div> 95 </a></li> 96 <li class="media"><a href="javascript:;"> 97 <div class="media-left"> 98 <img src="<%=basePath %>/BacksAdmin/assets/img/user-1.jpg" class="media-object" alt="" /></div> 99 <div class="media-body"> 100 <h6 class="media-heading"> 101 John Smith</h6> 102 <p> 103 Quisque pulvinar tellus sit amet sem scelerisque tincidunt.</p> 104 <div class="text-muted f-s-11"> 105 25 minutes ago</div> 106 </div> 107 </a></li> 108 <li class="media"><a href="javascript:;"> 109 <div class="media-left"> 110 <img src="<%=basePath %>/BacksAdmin/assets/img/user-2.jpg" class="media-object" alt="" /></div> 111 <div class="media-body"> 112 <h6 class="media-heading"> 113 Olivia</h6> 114 <p> 115 Quisque pulvinar tellus sit amet sem scelerisque tincidunt.</p> 116 <div class="text-muted f-s-11"> 117 35 minutes ago</div> 118 </div> 119 </a></li> 120 <li class="media"><a href="javascript:;"> 121 <div class="media-left"> 122 <i class="fa fa-plus media-object bg-green"></i> 123 </div> 124 <div class="media-body"> 125 <h6 class="media-heading"> 126 New User Registered</h6> 127 <div class="text-muted f-s-11"> 128 1 hour ago</div> 129 </div> 130 </a></li> 131 <li class="media"><a href="javascript:;"> 132 <div class="media-left"> 133 <i class="fa fa-envelope media-object bg-blue"></i> 134 </div> 135 <div class="media-body"> 136 <h6 class="media-heading"> 137 New Email From John</h6> 138 <div class="text-muted f-s-11"> 139 2 hour ago</div> 140 </div> 141 </a></li> 142 <li class="dropdown-footer text-center"><a href="javascript:;">View more</a> </li> 143 </ul> 144 </li> 145 <li class="dropdown navbar-user"><a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"> 146 <img src="<%=basePath %>/BacksAdmin/assets/img/user-13.jpg" alt="" /> 147 <span class="hidden-xs">Adam Schwartz</span> <b class="caret"></b></a> 148 <ul class="dropdown-menu animated fadeInLeft"> 149 <li class="arrow"></li> 150 <li><a href="javascript:;">Edit Profile</a></li> 151 <li><a href="javascript:;"><span class="badge badge-danger pull-right">2</span> Inbox</a></li> 152 <li><a href="javascript:;">Calendar</a></li> 153 <li><a href="javascript:;">Setting</a></li> 154 <li class="divider"></li> 155 <li><a href="javascript:;">Log Out</a></li> 156 </ul> 157 </li> 158 </ul> 159 <!-- end header navigation right --> 160 </div> 161 <!-- end container-fluid --> 162 </div> 163 <!-- end #header --> 164 <!-- begin #sidebar --> 165 <div id="sidebar" class="sidebar"> 166 <!-- begin sidebar scrollbar --> 167 <div data-scrollbar="true" data-height="100%"> 168 <!-- begin sidebar user --> 169 <ul class="nav"> 170 <li class="nav-profile"> 171 <div class="image"> 172 <a href="javascript:;"><img src="assets/img/user-13.jpg" alt="" /></a> 173 </div> 174 <div class="info"> 175 Sean Ngu 176 <small>Front end developer</small> 177 </div> 178 </li> 179 </ul> 180 <!-- end sidebar user --> 181 <!-- begin sidebar nav --> 182 <ul class="nav"> 183 <li class="nav-header">導航</li> 184 <li class="has-sub"> 185 <a href="javascript:;"> 186 <b class="caret pull-right"></b> 187 <i class="fa fa-home"></i> 188 <span>首頁</span> 189 </a> 190 <ul class="sub-menu"> 191 192 <li class="active"><a href="<%=basePath%>/BacksAdmin/index.jsp">主控面板</a></li> 193 194 </ul> 195 </li> 196 <li class="has-sub"> 197 <a href="javascript:;"> 198 <b class="caret pull-right"></b> 199 <i class="fa fa-file-o"></i> 200 <span>購票管理</span> 201 </a> 202 <ul class="sub-menu"> 203 <li ><a href="<%=basePath%>/BacksAdmin/flight/chapiao.jsp">在線購票</a></li> 204 <li><a href="<%=basePath%>/BacksAdmin/order_approve/list.jsp">訂單審覈</a></li> 205 </ul> 206 </li> 207 <li class="has-sub"> 208 <a href="javascript:;"> 209 <b class="caret pull-right"></b> 210 <i class="fa fa-newspaper-o"></i> 211 <span>航空公司管理</span> 212 </a> 213 <ul class="sub-menu"> 214 <li> 215 <a href="<%=basePath%>/BacksAdmin/aircompany/search.jsp">查詢</a> 216 </li> 217 <li class="active"> 218 <a href="<%=basePath%>/BacksAdmin/aircompany/add.jsp">添加</a> 219 </li> 220 </ul> 221 </li> 222 <li class="has-sub"> 223 <a href="javascript:;"> 224 <b class="caret pull-right"></b> 225 <i class="fa fa-user"></i> 226 <span>人員管理</span> 227 </a> 228 <ul class="sub-menu"> 229 <li ><a href="employee!A.action">錄入員工信息</a></li> 230 <li><a href="employee!Find.action">刪除員工信息</a></li> 231 <li ><a href="employee!Find1.action">修改員工信息</a></li> 232 <li><a href="employee!Find2.action">查詢員工信息</a></li> 233 </ul> 234 </li> 235 <li class="has-sub"> 236 <a href="javascript:;"> 237 <b class="caret pull-right"></b> 238 <i class="fa fa-calendar-o"></i> 239 <span>折扣管理</span> 240 </a> 241 <ul class="sub-menu"> 242 <li ><a href="<%=basePath%>/BacksAdmin/discount/calendar1.jsp">折扣管理</a></li> 243 <li><a href="#">自定義添加內容</a></li> 244 </ul> 245 </li> 246 <li class="has-sub"> 247 <a href="javascript:;"> 248 <b class="caret pull-right"></b> 249 <i class="fa fa-paper-plane-o"></i> 250 <span>航班管理</span> 251 </a> 252 253 <ul class="sub-menu"> 254 <li ><a href="line-manager!queryLineToday.action">查詢航班</a></li> 255 256 </ul> 257 </li> 258 <li class="has-sub"> 259 <a href="javascript:;"> 260 <b class="caret pull-right"></b> 261 <i class="glyphicon glyphicon-plane"></i> 262 <span>飛機管理</span> 263 </a> 264 <ul class="sub-menu"> 265 <li><a 266 href="plane!czfj.action">查詢</a></li> 267 <li><a href="<%=basePath %>BacksAdmin/plane/add.jsp">添加</a></li> 268 </ul> 269 </li> 270 <li class="has-sub active"> 271 <a href="javascript:;"> 272 <b class="caret pull-right"></b> 273 <i class="fa fa-users"></i> 274 <span>客戶管理</span> 275 </a> 276 <ul class="sub-menu"> 277 <li ><a href="<%=basePath %>/BacksAdmin/ordermd/tuser!show.action">查詢</a></li> 278 <li class="active"><a href="<%=basePath %>/BacksAdmin/ordermd/Tuser1.jsp">添加</a></li> 279 </ul> 280 </li> 281 <li class="has-sub"> 282 <a href="javascript:;"> 283 <b class="caret pull-right"></b> 284 <i class="fa fa-list-alt"></i> 285 <span>季度報表</span> 286 </a> 287 <ul class="sub-menu"> 288 <li ><a href="#">自定義添加內容</a></li> 289 <li><a href="#">自定義添加內容</a></li> 290 </ul> 291 </li> 292 <li class="has-sub"> 293 <a href="javascript:;"> 294 <span class="badge pull-right">99</span> 295 <i class="fa fa-inbox"></i> 296 <span>郵箱</span> 297 </a> 298 <ul class="sub-menu"> 299 <li><a href="email_inbox.html">Inbox v1</a></li> 300 <li><a href="email_inbox_v2.html">Inbox v2</a></li> 301 <li><a href="email_compose.html">Compose</a></li> 302 <li><a href="email_detail.html">Detail</a></li> 303 </ul> 304 </li> 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 <!-- begin sidebar minify button --> 320 <li><a href="javascript:;" class="sidebar-minify-btn" data-click="sidebar-minify"><i class="fa fa-angle-double-left"></i></a></li> 321 <!-- end sidebar minify button --> 322 </ul> 323 <!-- end sidebar nav --> 324 </div> 325 <!-- end sidebar scrollbar --> 326 </div> 327 <div class="sidebar-bg"> 328 </div> 329 <!-- end #sidebar --> 330 <!-- begin #content --> 331 332 333 334 <div id="content" class="content"> 335 <!-- begin breadcrumb --> 336 <ol class="breadcrumb pull-right"> 337 <li><a href="javascript:;">主頁</a></li> 338 <li><a href="javascript:;">用戶管理</a></li> 339 <li class="active">修改或保存信息</li> 340 </ol> 341 <!-- end breadcrumb --> 342 <!-- begin page-header --> 343 <h1 class="page-header"> 344 用戶管理 <small>如下是全部能夠修改的信息...</small></h1> 345 <!-- end page-header --> 346 347 <div class="panel panel-inverse"> 348 <div class="panel-heading"> 349 <div class="panel-heading-btn"> 350 <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a> 351 <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-repeat"></i></a> 352 <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a> 353 <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a> 354 </div> 355 <h4 class="panel-title">客戶管理</h4> 356 </div> 357 <div class="alert alert-info fade in"> 358 <button type="button" class="close" data-dismiss="alert"> 359 <span aria-hidden="true">×</span> 360 </button> 361 362 <label class="control-label" for="input01" style="font-weight:bold"> 363 遠方，從holy airport開始 364 </label> 365 366 </div> 367 <div class="panel-body"> 368 369 370 371 <form class="form-horizontal" action="tuser!add.action" method=" post" id="zzw1" > 372 373 <div class="control-group"> 374 <input type="hidden" value="${tue.id}" name="tue.id"/> 375 <!-- Text input--> 376 <label class="control-label" for="input01" style="font-weight:bold"> 377 姓名 378 </label> 379 <div class="controls"> 380 <input type="text" placeholder="請輸入姓名" class="input-xlarge form-control" 381 name="tue.name" value="${tue.name}" > 382 383 </div> 384 </div> 385 386 <div class="control-group"> 387 388 <!-- Text input--> 389 <label class="control-label" for="input01" style="font-weight:bold"> 390 身份證 391 </label> 392 <div class="controls"> 393 <input type="text" placeholder="請輸入身份證" class="input-xlarge form-control" 394 name="tue.idcard" value="${tue.idcard}"> 395 396 </div> 397 </div> 398 399 400 <div class="control-group"> 401 402 <!-- Text input--> 403 <label class="control-label" for="input01" style="font-weight:bold"> 404 性別 405 </label> 406 <div class="controls"> 407 <input type="text" placeholder="請輸入性別" class="input-xlarge form-control" 408 name="tue.sex" value="${tue.sex}"> 409 410 </div> 411 </div> 412 413 <div class="control-group"> 414 415 <!-- Text input--> 416 <label class="control-label" for="input01" style="font-weight:bold"> 417 聯繫電話 418 </label> 419 <div class="controls"> 420 <input type="text" placeholder="請輸入聯繫電話" class="input-xlarge form-control" 421 name="tue.phone" value="${tue.phone}"> 422 423 </div> 424 </div> 425 426 <div class="control-group"> 427 428 <!-- Text input--> 429 <label class="control-label" for="input01" style="font-weight:bold"> 430 設置帳戶 431 </label> 432 <div class="controls"> 433 <input type="text" placeholder="請輸入你想要設置的帳戶" class="input-xlarge form-control" 434 name="tue.account" value="${tue.account}"> 435 436 </div> 437 </div> 438 439 <div class="control-group"> 440 441 <!-- Text input--> 442 <label class="control-label" for="input01" style="font-weight:bold"> 443 密碼 444 </label> 445 <div class="controls"> 446 <input type="text" placeholder="請輸入設置的密碼" class="input-xlarge form-control" 447 name="tue.psw" value="${tue.psw}"> 448 449 </div> 450 </div> 451 452 <div class="control-group"> 453 454 <!-- Text input--> 455 <label class="control-label" for="input01" style="font-weight:bold"> 456 會員類型 457 </label> 458 <div class="controls"> 459 <input type="text" placeholder="請輸入會員類型" class="input-xlarge form-control" 460 name="tue.type" value="${tue.type}"> 461 462 </div> 463 </div> 464 <br /> 465 <div class="control-group"> 466 467 <input type="submit" class="btn btn-info" value="保存" /> 468 <input type="button" class="btn btn-sm btn-white" 469 onclick="location.href='tuser!show.action'" value="返回" /> 470 471 </div> 472 473 474 </form> 475 476 </div> 477 </div> 478 </div> 479 </div> 480 <!-- end row --> 481 <!-- begin row --> 482 483 484 <!-- end row --> 485 <!-- begin row --> 486 <!-- end row --> 487 </div> 488 <!-- end #content --> 489 <!-- begin theme-panel --> 490 <div class="theme-panel"> 491 <a href="javascript:;" data-click="theme-panel-expand" class="theme-collapse-btn"><i 492 class="fa fa-cog"></i></a> 493 <div class="theme-panel-content"> 494 <h5 class="m-t-0"> 495 Color Theme</h5> 496 <ul class="theme-list clearfix"> 497 <li class="active"><a href="javascript:;" class="bg-green" data-theme="default" data-click="theme-selector" 498 data-toggle="tooltip" data-trigger="hover" data-container="body" data-title="Default"> 499 </a></li> 500 <li><a href="javascript:;" class="bg-red" data-theme="red" data-click="theme-selector" 501 data-toggle="tooltip" data-trigger="hover" data-container="body" data-title="Red"> 502 </a></li> 503 <li><a href="javascript:;" class="bg-blue" data-theme="blue" data-click="theme-selector" 504 data-toggle="tooltip" data-trigger="hover" data-container="body" data-title="Blue"> 505 </a></li> 506 <li><a href="javascript:;" class="bg-purple" data-theme="purple" data-click="theme-selector" 507 data-toggle="tooltip" data-trigger="hover" data-container="body" data-title="Purple"> 508 </a></li> 509 <li><a href="javascript:;" class="bg-orange" data-theme="orange" data-click="theme-selector" 510 data-toggle="tooltip" data-trigger="hover" data-container="body" data-title="Orange"> 511 </a></li> 512 <li><a href="javascript:;" class="bg-black" data-theme="black" data-click="theme-selector" 513 data-toggle="tooltip" data-trigger="hover" data-container="body" data-title="Black"> 514 </a></li> 515 </ul> 516 <div class="divider"> 517 </div> 518 <div class="row m-t-10"> 519 <div class="col-md-5 control-label double-line"> 520 Header Styling</div> 521 <div class="col-md-7"> 522 <select name="header-styling" class="form-control input-sm"> 523 <option value="1">default</option> 524 <option value="2">inverse</option> 525 </select> 526 </div> 527 </div> 528 <div class="row m-t-10"> 529 <div class="col-md-5 control-label"> 530 Header</div> 531 <div class="col-md-7"> 532 <select name="header-fixed" class="form-control input-sm"> 533 <option value="1">fixed</option> 534 <option value="2">default</option> 535 </select> 536 </div> 537 </div> 538 <div class="row m-t-10"> 539 <div class="col-md-5 control-label double-line"> 540 Sidebar Styling</div> 541 <div class="col-md-7"> 542 <select name="sidebar-styling" class="form-control input-sm"> 543 <option value="1">default</option> 544 <option value="2">grid</option> 545 </select> 546 </div> 547 </div> 548 <div class="row m-t-10"> 549 <div class="col-md-5 control-label"> 550 Sidebar</div> 551 <div class="col-md-7"> 552 <select name="sidebar-fixed" class="form-control input-sm"> 553 <option value="1">fixed</option> 554 <option value="2">default</option> 555 </select> 556 </div> 557 </div> 558 <div class="row m-t-10"> 559 <div class="col-md-5 control-label double-line"> 560 Sidebar Gradient</div> 561 <div class="col-md-7"> 562 <select name="content-gradient" class="form-control input-sm"> 563 <option value="1">disabled</option> 564 <option value="2">enabled</option> 565 </select> 566 </div> 567 </div> 568 <div class="row m-t-10"> 569 <div class="col-md-5 control-label double-line"> 570 Content Styling</div> 571 <div class="col-md-7"> 572 <select name="content-styling" class="form-control input-sm"> 573 <option value="1">default</option> 574 <option value="2">black</option> 575 </select> 576 </div> 577 </div> 578 <div class="row m-t-10"> 579 <div class="col-md-12"> 580 <a href="#" class="btn btn-inverse btn-block btn-sm" data-click="reset-local-storage"> 581 <i class="fa fa-refresh m-r-3"></i>Reset Local Storage</a> 582 </div> 583 </div> 584 </div> 585 </div> 586 <!-- end theme-panel --> 587 <!-- begin scroll to top btn --> 588 <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade" 589 data-click="scroll-top"><i class="fa fa-angle-up"></i></a> 590 <!-- end scroll to top btn --> 591 </div> 592 <!-- end page container --> 593 <!-- ================== BEGIN BASE JS ================== --> 594 595 <script src="<%=basePath %>/BacksAdmin/assets/plugins/jquery/jquery-1.9.1.min.js"></script> 596 597 <script src="<%=basePath %>/BacksAdmin/assets/plugins/jquery/jquery-migrate-1.1.0.min.js"></script> 598 599 <script src="<%=basePath %>/BacksAdmin/assets/plugins/jquery-ui/ui/minified/jquery-ui.min.js"></script> 600 601 <script src="<%=basePath %>/BacksAdmin/assets/plugins/bootstrap/js/bootstrap.min.js"></script> 602 603 <!--[if lt IE 9]> 604 <script src="assets/crossbrowserjs/html5shiv.js"></script> 605 <script src="assets/crossbrowserjs/respond.min.js"></script> 606 <script src="assets/crossbrowserjs/excanvas.min.js"></script> 607 <![endif]--> 608 609 <script src="<%=basePath %>/BacksAdmin/assets/plugins/slimscroll/jquery.slimscroll.min.js"></script> 610 611 <script src="<%=basePath %>/BacksAdmin/assets/plugins/jquery-cookie/jquery.cookie.js"></script> 612 613 <!-- ================== END BASE JS ================== --> 614 <!-- ================== BEGIN PAGE LEVEL JS ================== --> 615 <script src="<%=basePath %>/BacksAdmin/assets/plugins/DataTables/js/jquery.dataTables.js"></script> 616 <script src="<%=basePath %>/BacksAdmin/assets/plugins/morris/raphael.min.js"></script> 617 618 <script src="<%=basePath %>/BacksAdmin/assets/plugins/morris/morris.js"></script> 619 620 <script src="<%=basePath %>/BacksAdmin/assets/plugins/jquery-jvectormap/jquery-jvectormap-1.2.2.min.js"></script> 621 622 <script src="<%=basePath %>/BacksAdmin/assets/plugins/jquery-jvectormap/jquery-jvectormap-world-merc-en.js"></script> 623 624 <script src="<%=basePath %>/BacksAdmin/assets/plugins/bootstrap-calendar/js/bootstrap_calendar.min.js"></script> 625 626 <script src="<%=basePath %>/BacksAdmin/assets/plugins/gritter/js/jquery.gritter.js"></script> 627 628 <script src="<%=basePath %>/BacksAdmin/assets/js/dashboard-v2.min.js"></script> 629 630 <script src="<%=basePath %>/BacksAdmin/assets/js/apps.min.js"></script> 631 <script src="<%=basePath%>/resource/foreground/js/jquery.validate.js"></script> 632 <script src="<%=basePath%>/BacksAdmin/ordermd/js/check1.js"></script> 633 634 <!-- ================== END PAGE LEVEL JS ================== --> 635 <script type="text/javascript"> 636 $(document).ready( function () { 637 638 639 $('#table_id').DataTable({ 640 language: { 641 "sProcessing": "處理中...", 642 "sLengthMenu": "顯示 _MENU_ 項結果", 643 "sZeroRecords": "沒有匹配結果", 644 "sInfo": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項", 645 "sInfoEmpty": "顯示第 0 至 0 項結果，共 0 項", 646 "sInfoFiltered": "(由 _MAX_ 項結果過濾)", 647 "sInfoPostFix": "", 648 "sSearch": "任意搜索:", 649 "sUrl": "", 650 "sEmptyTable": "表中數據爲空", 651 "sLoadingRecords": "載入中...", 652 "sInfoThousands": ",", 653 "oPaginate": { 654 "sFirst": "首頁", 655 "sPrevious": "上頁", 656 "sNext": "下頁", 657 "sLast": "末頁" 658 }, 659 "oAria": { 660 "sSortAscending": ": 以升序排列此列", 661 "sSortDescending": ": 以降序排列此列" 662 } 663 } 664 }); 665 } ); 666 </script> 667 <script> 668 $(document).ready(function() { 669 App.init(); 670 DashboardV2.init(); 671 }); 672 </script> 673 674 </body> 675 </html>
本身寫的js文件
1 var validator; 2 $(function(){ 3 alert(1); 4 var flag=0; 5 var location = (window.location + '').split('/'); 6 var basePath = location[0] + '//' + location[2] + '/' + location[3] + '/'; 7 8 bdyz(); 9 10 11 12 }); 13 //表單驗證 14 function bdyz(){ 15 validator= $("#zzw1").validate({ 16 rules: { 17 "tue.name": { 18 required: true, 19 minlength: 3, 20 maxlength: 11, 21 }, 22 "tue.idcard":{ 23 required: true, 24 idcard:true, 25 remote: 26 { //驗證身份證是否存在 27 type:"POST", 28 url:"tuser!verifyIdcard.action", 29 data:{ 30 name:function(){return $("#tue.idcard").val();} 31 } 32 } 33 }, 34 "tue.sex":{ 35 required: true, 36 }, 37 "tue.phone": { 38 required: true, 39 digits:true, 40 minlength: 11, 41 maxlength:11, 42 43 }, 44 "tue.account": { 45 required: true, 46 minlength: 2, 47 maxlength: 10, 48 remote: 49 { //驗證身份證是否存在 50 type:"POST", 51 url:"tuser!verifyAccount.action", 52 data:{ 53 name:function(){return $("#tue.account").val();} 54 } 55 } 56 57 }, 58 "tue.psw": { 59 required: true, 60 minlength: 2, 61 maxlength: 16, 62 }, 63 "tue.type":{ 64 required: true, 65 }, 66 }, 67 messages: { 68 "tue.name": { 69 required: '請輸入姓名', 70 minlength: '姓名不能少於3個字符', 71 maxlength: '姓名不能超過11個字符', 72 }, 73 "tue.idcard": { 74 required: '請輸入證件號碼', 75 idcard:'證件號不合法', 76 remote: '身份證已存在', 77 }, 78 "tue.sex": { 79 required: '請輸入性別', 80 }, 81 "tue.phone": { 82 required: '請輸入手機號碼', 83 digits:'請輸入數字', 84 minlength: '請輸入11位數字', 85 maxlength: '輸入位數大於12位', 86 87 }, 88 "tue.account": { 89 required: '請輸入用戶名', 90 minlength: '用戶名不能小於2個字符', 91 maxlength: '用戶名不能超過10個字符', 92 remote: '帳號已存在', 93 94 }, 95 "tue.psw": { 96 required: '請輸入密碼', 97 minlength: '密碼不能小於2個字符', 98 maxlength: '密碼不能超過16個字符' 99 100 }, 101 "tue.type": { 102 required: '請輸入用戶類型', 103 }, 104 105 } 106 107 }); 108 $.validator.addMethod("idcard", function(value, element, params){ 109 var isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/; 110 var isIDCard2=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/; 111 if(isIDCard1.test(value)||isIDCard2.test(value)) 112 return true; 113 else 114 return false; 115 }, $.validator.format("請填寫正確證件號碼！") 116 117 ); 118 }
後臺ajax驗證是否存在這個帳號代碼
1 //驗證account是否已存在 2 public String verifyAccount() throws Exception{ 3 int flag=0;//判斷是否已存在用戶的標誌，默認不存在 4 String account =tue.getAccount();//用戶名 5 6 userlist = tdao.listall(); 7 for (int i = 0; i < userlist.size(); i++) { 8 Tuser ae2= userlist.get(i); 9 String[] s = new String[1]; 10 s[0]=(ae2.getAccount()); 11 if(s[0].equals(account)) 12 flag=1; 13 } 14 if(flag==1) 15 this.getResponse().getWriter().print(false);//存在就給前臺返回一個false 16 else 17 this.getResponse().getWriter().print(true);//不存在就給前臺返回一個true 18 return null; 19 20 }
引入juquery類庫，和jquery.validate.js就能夠了
相關文章
- 1. jQuery插件Validation表單驗證
- 2. jQuery- 表單驗證插件-Validation
- 3. jQuery插件——Validation Plugin表單驗證
- 4. Jquery-05表單驗證插件-validation
- 5. jQuery表單驗證插件 -- Validation插件的使用
- 6. form-validation--表單驗證插件
- 7. jQuery插件 -- 表單驗證插件jquery.validate.js
- 8. Flask+JQuery Validation 插件+Ajax進行表單的驗證
- 9. 表單驗證插件jQuery Validation Engine使用介紹
- 10. 使用JQuery的插件validation完成表單驗證
- 更多相關文章...
- • PHP 表單驗證 - PHP教程
- • PHP 表單 - 驗證郵件和URL - PHP教程
- • IntelliJ IDEA安裝代碼格式化插件
- • Kotlin學習（二）基本類型
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. jQuery插件Validation表單驗證
- 2. jQuery- 表單驗證插件-Validation
- 3. jQuery插件——Validation Plugin表單驗證
- 4. Jquery-05表單驗證插件-validation
- 5. jQuery表單驗證插件 -- Validation插件的使用
- 6. form-validation--表單驗證插件
- 7. jQuery插件 -- 表單驗證插件jquery.validate.js
- 8. Flask+JQuery Validation 插件+Ajax進行表單的驗證
- 9. 表單驗證插件jQuery Validation Engine使用介紹
- 10. 使用JQuery的插件validation完成表單驗證