时间戳

首页 > 解决方案 > 如何让按钮检查一个id

html - 如何让按钮检查一个id

问题描述

我一直在尝试为我的网站创建一个登录页面，但是当您单击“登录”时，我正在尝试这样做。它检查该值并确保它的 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>

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

标签： htmltwitter-bootstrapvalidation

解决方案

这里有很多问题。

  • 您的表单指向index.html，这意味着您没有服务器端验证。您应该使用 PHP、ASP.NET 或 Python 之类的东西在服务器端验证您的登录，否则您将面临大量安全漏洞。
  • 您<button>有一个无效href的属性。只能应用于、和。你只希望它在你的元素上。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()，检查两个输入字段中的值，如果它们都是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
  }
})
<form class="form-login" action="index.html">
  <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">
    <br />
    <button class="btn btn-theme btn-block" type="submit"><i class="fa fa-lock"></i> SIGN IN</button>
  </div>
</form>

另外，请注意，此客户端登录验证应作为服务器端逻辑的补充。登录的客户端验证几乎与使用 Twistee 而不是钥匙锁门一样弱。始终在服务器端验证登录！

推荐阅读