Question

我试图密码保护＆＃39;我为客户构建的页面页面，以便他们可以检查其页面的进度，但对于没有代码的人来说，它将无法使用。

我现在已经尝试了几个小时，但我似乎无法让它发挥作用。我现在可以通过一个包含登录代码的地方获得一个弹出屏幕，但是我无法将其重定向到另一个页面。

这是我的代码：

＆＃13;

$(document).ready(function() {
  $('.accesbutton').click(function() {
    $('.login').fadeIn('fast');
    $('.opening').fadeTo('fast', 0.2);
  });

  var $code = $('.logincode').val();
  var $check = 'DDT4DHFD';
  $('.submit').click(function() {
    if ($code === $check) {
      window.location = 'homepage.html';
    } else {
      $('.logincode').animate({
        color: 'red'
      });
    }
  });
});

＆＃13;

.login {
  background-color: #FFFFFF;
  position: absolute;
  margin: auto;
  padding: 0 1em;
  left: 35%;
  top: 10em;
  width: 30%;
  height: auto;
  z-index: 1000;
  display: none;
}
.accesbutton {
  background-color: #FF3333;
  width: 10em;
  height: 3em;
  line-height: 3em;
  margin: 2em auto;
  border-radius: 25px;
  text-align: center;
}
.text {
  color: #ffffff;
  text-align: center;
  font-family: "Open Sans";
  font-size: 1.2em;
}

＆＃13;

<body>
  <html>
  <div class="accesbutton">
    <p class="text">Bekijk website</p>
  </div>
  <div class="login">
    <p class="text" style="color:#000000">Je kunt hier inloggen met een toeganscode.
      <br>
      <br>Heb je geen toegangscode? Neem dan contact op met The Design Company of je Beheerder.
      <br>
    </p>
    <p class="text" style="color:#000000">
      <label for="usermail">Toegangscode:</label>
      <input type="text" name="usercode" placeholder="XXXXXXXX" class="logincode" required>
      <input type="submit" value="Login" class="submit">
    </p>
  </div>
</body>
</html>

＆＃13;

部分文字是荷兰语，包括按钮。

第一部分打开弹出屏幕，第二部分应该在代码正确时重定向到页面。

我做错了什么？

-Johr Claessens

Answer 1

<强>更新

对于安全问题，您可以使用get或post作为数据参数$（＆＃39; .logincode＆＃39;）。val（）。在服务器端（使用当前语言，如C＃，javascript，PHP，...我不知道您当前使用的是哪种语言），您可以比较这些值并返回客户端只有一个值：true或false。例如，您可以编写如下内容：

$.get("checklogin.php", { val: $('.logincode').val() } )
 .done(function(data) {})
 .fail(function() {});

OLD ANSWER：

代码中的拼写错误是：

var $code = $('.logincode').val();

这是在事件处理程序之外声明的。

我可能建议你在服务器端保存变量$ check的值，这是一个简单的技巧，以避免在客户端看到这样的变量：

＆＃13;

$(function () {
  $('.accesbutton').click(function() {
    $('.login').fadeIn('fast');
    $('.opening').fadeTo('fast', 0.2);
  });


  var $check = 'DDT4DHFD'; // put this variable in a text (or json) file on server side
  $('.submit').click(function(e) {
    var $code = $('.logincode').val();  // this is your typo
    
    
    // you may use this to get and test value from your server
    // I figured out checklogin as a text server side file
    /***************************
    $('.submit').prop('disabled', true);
    $.get('checklogin', function( data ) {
      if (data.trim() == $check) {
        window.location = 'homepage.html';
      } else {
        $('.logincode').animate({
          color: 'red'
        });
      }
      $(this).removeProp('disabled');
    }).fail(function() {
      console.log('Failed');
      $('.submit').removeProp('disabled');
    });
    ****************************/
    // Till here.........................
    
    
    // or like you are doing.....
    if ($code === $check) {
      window.location = 'homepage.html';
    } else {
      $('.logincode').animate({
        color: 'red'
      });
    }
  });
});

＆＃13;

.login {
  background-color: #FFFFFF;
  position: absolute;
  margin: auto;
  padding: 0 1em;
  left: 35%;
  top: 10em;
  width: 30%;
  height: auto;
  z-index: 1000;
  display: none;
}
.accesbutton {
  background-color: #FF3333;
  width: 10em;
  height: 3em;
  line-height: 3em;
  margin: 2em auto;
  border-radius: 25px;
  text-align: center;
}
.text {
  color: #ffffff;
  text-align: center;
  font-family: "Open Sans";
  font-size: 1.2em;
}

＆＃13;

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div class="accesbutton">
    <p class="text">Bekijk website</p>
</div>
<div class="login">
    <p class="text" style="color:#000000">Je kunt hier inloggen met een toeganscode.
        <br>
        <br>Heb je geen toegangscode? Neem dan contact op met The Design Company of je Beheerder.
        <br>
    </p>
    <p class="text" style="color:#000000">
        <label for="usermail">Toegangscode:</label>
        <input type="text" name="usercode" placeholder="XXXXXXXX" class="logincode" required>
        <input type="submit" value="Login" class="submit">
    </p>
</div>

＆＃13;

如何检查文本框并使用Javascript重定向到URL？

1 个答案: