bootstrap,bootstrapValidator實現登陸頁面及輸入校驗
阿新 • • 發佈：2019-02-16
一、引用的檔案 <link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.css" rel="stylesheet"> <link href="signin.css" rel="stylesheet"> <script src="jquery-3.2.1.js"></script> <script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script> 二、html完整程式碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ --> <meta name="description" content=""> <meta name="author" content=""> <title>Signin Template for Bootstrap</title> <!-- Bootstrap core CSS --> <link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <link href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="signin.css" rel="stylesheet"> <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <script src="jquery-3.2.1.js"></script> <script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <form class="form-signin" id="LoginG" > <h2 class="form-signin-heading">Please sign in</h2> <div class="form-group"> <label for="username" class="sr-only">Username</label> <input type="text" id="username" name="username" class="form-control" placeholder="Username"/> </div> <div class="form-group"> <label for="password" class="sr-only">Password</label> <input type="password" id="password" name="password" class="form-control" placeholder="Password" /> </div> <div class="checkbox"> <label> <input type="checkbox" value="remember-me"> Remember me </label> </div> <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> </form> </div> <!-- /container --> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <script type="text/javascript"> $(function () { $('#LoginG').bootstrapValidator({ //message: 'This value is not valid', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { username: { message: '使用者名稱驗證失敗', validators: { notEmpty: { message: '使用者名稱不能為空' }, stringLength: { min: 6, max: 18, message: '使用者名稱長度必須在6到18位之間' }, regexp: { regexp: /^[a-zA-Z0-9_]+$/, message: '使用者名稱只能包含大寫、小寫、數字和下劃線' } } }, password: { validators: { notEmpty: { message: '密碼不能為空' } } } } }).on('success.form.bv', function(e) {//點選提交之後 alert("驗證成功登陸跳轉。。。"); return; // Use Ajax to submit form data 提交至form標籤中的action，result自定義 $.post("", "", function(result) { //do something... }); }); }); </script> </body> </html> 三、signin.css完成程式碼 body { background: url(4.jpg) no-repeat; background-size:cover; padding-top: 40px; padding-bottom: 40px; background-color: #eee; } .form-signin { max-width: 430px; padding: 50px; margin: 0 auto; background: rgba(255,255,255,0.2); } .form-signin .form-signin-heading, .form-signin { margin-bottom: 10px; } .form-signin .checkbox { font-weight: normal; } .form-signin .form-control { position: relative; height: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; font-size: 16px; } .form-signin .form-control:focus { z-index: 2; } .form-signin input[type="text"] { margin-bottom: 0px; } .form-signin input[type="password"] { margin-bottom: 0px; } .checkbox { margin-bottom: 10px; margin-top: 0px; } .glyphicon{ margin-top: 5px; } 四、瀏覽器控制檯報Uncaught RangeError: Maximum call stack size exceeded處理辦法： 是否加入：<div class="form-group"></div>