jQuery + bootstrap 4 簡單登入驗證
阿新 • • 發佈：2018-11-06
簡單的表單驗證bootstrap4自帶的js檔案就可以實現哦
bootstrap.js自帶的表單驗證的效果：
下面貼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"> <meta name="description" content=""> <meta name="author" content=""> <link rel="logo" href="images/logo.png"> <title>Signin</title> <!-- Bootstrap core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/messenger.css" rel="stylesheet"> <link href="css/messenger-theme-future.css" rel="stylesheet"> <link href="css/signin.css" rel="stylesheet"> <link href="plugins/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"> </head> <body class="text-center"> <script type="text/javascript" src="js/jquery-3.3.1.slim.min.js"></script> <script type="text/javascript" src="js/signin.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/messenger.min.js"></script> <div class="container"> <form class="form-signin" action="passed.html"> <img class="mb-4" src="images/logo.png" alt="" width="180" height="72"> <h2 class="form-signin-heading">Please sign in</h2> <label for="inputEmail" class="sr-only">Email address</label> <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus> <label for="inputPassword" class="sr-only">Password</label> <input type="password" id="inputPassword" class="form-control" placeholder="Password" required> <div class="checkbox"> <label> <input type="checkbox" value="remember-me"> Remember me </label> </div> <button class="btn btn-lg btn-primary btn-block" id="check" type="submit">Sign in</button> </form> </div> </body> </html>
非常簡單而且好看呢。這個pass.html是登入成功後跳轉的頁面就不放程式碼了隨便寫寫。
這個圖片感覺也可以換成更合適的fontawesome的home圖示
<i class="fa fa-home"></i>貼一下奇怪的signin.css……大家可以自己根據不帶這個檔案時，原有的樣子設計（就不會綠了）：
body { padding-top: 40px; padding-bottom: 40px; background-color: #eee; } .form-signin { max-width: 330px; padding: 15px; margin: 100px auto; } .form-signin .form-signin-heading, .form-signin .checkbox { margin-bottom: 10px; } .form-signin .checkbox { font-weight: normal; font-size: 15px; } .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="email"] { margin-bottom: -1px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .form-signin input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; } .btn-primary { background-color: #9BCD9B; border-color: #9BCD9B; } .btn-primary:hover { background-color: #7CCD7C; border-color: #7CCD7C; }
雖然寫顏色的rgb值時隨便寫寫用了大寫，不過實際最好用小寫哦。。
最重要的還是登入名的驗證。
我們的目的是實現最簡單的登入驗證。之前查了很多資料也沒找到簡單的登入認證實現，後來用了一種比較粗暴的形式，很簡單的幾行，signin.js:
$(function() { $("#check").click (function() { if($('#inputEmail').val()=='[email protected]'&& $('#inputPassword').val()=='123'){ alert('登陸成功！'); return true; }else { $('#inputEmail').val('');//清空輸入框 $('#inputPassword').val(''); alert('登陸失敗！'); return false; } }); });
雖然簡單粗暴不過能做到最簡單的認證：
點選確定後跳轉的頁面：
如果使用者名稱或密碼的字元不對：
點選確定後輸入框全部清空：
