Question

大家好，我开始逐步学习网络编程。我打算使用bootstrap和Javascript创建一个简单的登录表单。实现它的方法是什么？。

Answer 1

像这样：）

＆＃13;

$(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');  
      }
   });
});

＆＃13;

<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>

＆＃13;

Answer 2

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

当您的服务器准备就绪时，您可以轻松地向其添加登录表单。

如何使用bootstrap和JS创建一个简单的登录页面？

2 个答案: