如何使用bootstrap和JS制作一个简单的登录页面

How to make a simple login page in using a bootstrap and JS?

本文关键字：简单 一个 登录 bootstrap 何使用 JS      更新时间：2023-09-26

大家好，我开始一步一步地学习web编程。我计划使用引导和Javascript创建一个简单的登录表单。如何实现?

像这样:)

$(document).ready(function() {
   $("#loginForm").submit(function(e) {
      e.preventDefault();
      if ($("#userEmail").val() != '' && $("#userPassword").val() != '') {
           if ($("#userEmail").val() == 'test@gmail.com' && $("#userPassword").val() == 'test') {
              window.location.href = './home.html'; 
           } else {
               alert('invalid username password');
           }
      } else {
        alert('username or password cann''t be blank');  
      }
   });
});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<div class="container" style="margin-top:30px">
    <div class="col-md-4 col-md-offset-4">
        <div class="panel panel-default">
            <div class="panel-heading"><h3 class="panel-title"><strong>Sign in </strong></h3></div>
            <div class="panel-body">
                <form role="form" id="loginForm">
                    <div class="form-group">
                        <label for="exampleInputEmail1">Username or Email</label>
                        <input type="email" class="form-control" style="border-radius:0px" id="userEmail" placeholder="Enter email">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Password <a href="/sessions/forgot_password">(forgot password)</a></label>
                        <input type="password" class="form-control" style="border-radius:0px" id="userPassword" placeholder="Password">
                    </div>
                    <button type="submit" class="btn btn-sm btn-default">Sign in</button>
                </form>
            </div>
        </div>
    </div>
</div>

从教程开始，网上有很多。https://scotch.io/tutorials/authenticate-a-node-js-api-with-json-web-tokens

当你的服务器准备好了，你可以很容易地添加登录规则到它。

相关文章：