我正在尝试为我为客户构建的页面制作一个“密码保护”页面，以便他们可以检查页面的进度，但对于没有密码的人来说将无法使用代码。
我已经尝试了几个小时，但似乎无法正常工作。我现在可以获得一个带有登录代码的弹出屏幕，但我无法将其重定向到另一个页面。
这是我的代码:
$(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'
});
}
});
});.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;
}<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>一些文本是荷兰语，包括按钮。
第一部分打开弹出屏幕，第二部分在代码正确时应该重定向到页面。
我做错了什么？
-Johr Claessens
最佳答案
更新:
对于安全问题，您可以使用 get或 post用作数据参数 $('.logincode').val()。在服务器端(使用您当前使用的语言，如 C#、javascript、PHP，...我不知道您当前使用的是哪一种)，您可以比较这些值并仅向客户端返回一个值:true 或 false。例如，您可以编写如下内容:
$.get("checklogin.php", { val: $('.logincode').val() } )
.done(function(data) {})
.fail(function() {});
旧答案:
您的代码中的拼写错误是:
var $code = $('.logincode').val();
这是在事件处理程序之外声明的。
我可能会建议你在服务器端保存变量 $check 的值，这是一个小技巧，以避免在客户端可见这样的变量:
$(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'
});
}
});
});.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;
}<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>关于javascript - 如何使用 Javascript 检查文本框并重定向到 URL？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37531416/