Question

我一直试图为我的网站创建一个登录页面，但是当您单击“登录”时，我试图这样做。它检查该值，并确保它的ID完全是“ admin”，密码是“ password”。我试图查找一些答案，但是遇到的答案却并不多。如果可以的话，那就太好了！

这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Dashboard">
<meta name="keyword" content="Dashboard, Bootstrap, Admin, Template, Theme, 
Responsive, Fluid, Retina">

<title>Halifax</title>

<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<!--external css-->
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />

<!-- Custom styles for this template -->
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/style-responsive.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media 
queries -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> 
</script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"> 
</script>
<![endif]-->
</head>

<body>

  <!--*********************MAIN CONTENT************* -->

  <div id="login-page">
    <div class="container">

          <form class="form-login" action="index.html">
            <h2 class="form-login-heading">sign in now</h2>
            <div class="login-wrap">
                <input type="text" class="form-control" id="id" 
placeholder="User ID" autofocus>
                <br>
                <input type="password" id="pass" class="form-control" 
placeholder="Password">
                <label class="checkbox">
                <script>
                var id = document.getElementById("id").value;
                var pass = document.getElementById("pass").value;
                </script>
                    <span class="pull-right">
                        <a data-toggle="modal" href="login.html#myModal"> 
Forgot Password?</a>

                    </span>
                </label>
                <button class="btn btn-theme btn-block" href="index.html" 
type="submit"><i class="fa fa-lock"></i> SIGN IN</button>
                <hr>

                <div class="login-social-link centered">
                <p>or you can sign in via your social network</p>
                    <button class="btn btn-facebook" type="submit"><i 
class="fa fa-facebook"></i> Facebook</button>
                    <button class="btn btn-twitter" type="submit"><i 
class="fa fa-twitter"></i> Twitter</button>
                </div>
                <div class="registration">
                    Don't have an account yet?<br/>
                    <a class="" href="#">
                        Create an account
                    </a>
                </div>

            </div>

              <!-- Modal -->
              <div aria-hidden="true" aria-labelledby="myModalLabel" 
role="dialog" tabindex="-1" id="myModal" class="modal fade">
                  <div class="modal-dialog">
                      <div class="modal-content">
                          <div class="modal-header">
                              <button type="button" class="close" data- 
dismiss="modal" aria-hidden="true">&times;</button>
                              <h4 class="modal-title">Forgot Password ?</h4>
                          </div>
                          <div class="modal-body">
                              <p>Enter your e-mail address below to reset 
your password.</p>
                              <input type="text" name="email" 
 placeholder="Email" autocomplete="off" class="form-control placeholder-no- 
 fix">

                          </div>
                          <div class="modal-footer">
                              <button data-dismiss="modal" class="btn btn- 
default" type="button">Cancel</button>
                              <button class="btn btn-theme" 
type="button">Submit</button>
                          </div>
                      </div>
                  </div>
              </div>
              <!-- modal -->

          </form>       

    </div>
  </div>

<!-- js placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>

<!--BACKSTRETCH-->
<!-- You can use an image of whatever size. This script will stretch to fit 
in any screen size.-->
<script type="text/javascript" src="assets/js/jquery.backstretch.min.js"> 
</script>
<script>
    $.backstretch("assets/img/login-bg.jpg", {speed: 500});
</script>


</body>
</html>

很抱歉，如果其中一些不在代码中。

Answer 1

这里有很多问题。

您的表单指向index.html，表示您没有 server-side validation 。您应该使用PHP，ASP.NET或Python之类的方法在服务器端验证登录名，否则您将面临筏安全漏洞。
您的<button>具有一个href属性，即 which is invalid 。 href仅适用于<a>，<area>，<base>和<link>。您只希望在<a>元素上使用它。
您的<script>中有一个<form>。虽然不是无效的，但您肯定会想清楚这一逻辑以便清楚，并通过向表单添加事件侦听器来使用 Unobtrusive JavaScript 。

说了这么多，您就为两个元素（#id和#pass）设置了ID，并在JavaScript中正确引用了它们：

var id = document.getElementById("id").value;
var pass = document.getElementById("pass").value;

但是，您实际上并没有做这两个变量。您将需要一些条件逻辑来检查这两个输入的值，并在匹配给定值的情况下执行某些操作。请注意，当您点击按钮时，您将设置这些值；否则它们将为空白。

在以下内容中可以看到，将事件侦听器附加到按钮单击上，防止使用e.preventDefault()进行默认提交，检查两个输入字段中的值，以及它们是否均为{{1} }，提交表单。

admin

var form = document.getElementsByTagName('form')[0];
var button = document.getElementsByTagName('button')[0];

button.addEventListener("click", function(e) {
  e.preventDefault(); // Prevent submission
  var id = document.getElementById("id").value;
  var pass = document.getElementById("pass").value;
  if (id == 'admin' && pass == 'admin') { // Check inputs
    form.submit(); // Submit the form
  }
})

此外，请注意，此客户端登录验证应该是对服务器端逻辑的补充。客户端的登录验证几乎与使用Twistee（而不是密钥）锁定门一样脆弱。始终在服务器端验证登录信息！

如何使按钮检查ID

1 个答案: