具有多个条件的Javascript密码表单
具有多个条件的Javascript密码表单
提问于 2018-10-17 07:17:11
我做了一个涉及收集线索的浏览器游戏。最后，我有一个页面，它要求用户输入几个字符，以便重定向到另一个页面。最后一条线索中的13个字母对应着13个盒子。因此，我使用了一个基本的密码输入表单，删除了用户ID部分，并在js代码中复制了具有多个条件的密码输入框。
每个框应该只有两个可接受的输入(大写/小写字母)，并且它们都需要正确才能重定向。否则，用户会收到一条错误消息。Cancel按钮应该使用户返回到上一页。稍后，密码将存储在服务器端，但现在可以保留在代码中。
早些时候(我想)它是可以工作的，但是在添加CSS和摆弄外观之后，它就停止工作了。现在，当我在任意数量的框中键入任何内容时，它允许我转到结束页。
注意:我已经花了几个小时在SO上寻找答案。我找不到任何与这个问题完全匹配的，我正在撕裂我的头发！我是javascript的新手(也是编写句号的新手)，所以我可能遗漏了一些基本的东西。
下面的代码(我已经包含了非form位的代码，以防其中的任何一个干扰它)……
<!DOCTYPE html>
<html lang="en">
<head>
<title>Game</title>
<link rel="shorcut icon" href="cogfavicon.jpg" type="image/jpg">
<link rel="icon" href="cogfavicon.jpg" type="image/x-icon">
<link rel="stylesheet" href="slider.css">
<script src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8"> </script>
<script type="text/javascript">
// Works in Firefox/Chrome so far. Test with ipad...
$(document).ready(function () {
$('div.toshow').fadeIn(2200); // Fade in <div> on page load
});
$(document).on("click", "a", function () { // delegate all clicks on "a" tag (link)
var newUrl = $(this).attr("href"); // get the href attribute
if (!newUrl || newUrl[0] === "#") { // verify if the new url exists or is a hash
location.hash = newUrl; // set that hash
return;
}
$("html").fadeOut(function () { // then fade out the page
location = newUrl; // when the animation completes, set the new location
});
return false; // prevents the default browser behaviour stopping fade effect
});
</script>
<!-- Basic structure for blue door password -->
<body bgcolor="#000000">
<div id="wrapper" div class="toshow" style="display:none;"> <!-- div class added for fade in -->
<div style="position:relative;top:25px;left:0px;z-index:-1">
<img src="cogs.png" style="position:absolute" width="980" height="550" alt="Cogs" />
</div>
<div id="password" style="position:relative;top:130px;left:0px">
<div style="position:relative;top:10px;left:36px">
<h3> This door requires a code to unlock...<h3>
<h1>L I K E C L O C K W O R K</h1>
<form name="Blue Door Enter" style="position:relative;left:4px">
<input type="password" name="pw1" style="width:19px"/>
<input type="password" name="pw2" style="width:19px"/>
<input type="password" name="pw3" style="width:19px"/>
<input type="password" name="pw4" style="width:19px"/>
<input type="password" name="pw5" style="width:19px"/>
<input type="password" name="pw6" style="width:19px"/>
<input type="password" name="pw7" style="width:19px"/>
<input type="password" name="pw8" style="width:19px"/>
<input type="password" name="pw9" style="width:19px"/>
<input type="password" name="pw10" style="width:19px"/>
<input type="password" name="pw11" style="width:19px"/>
<input type="password" name="pw12" style="width:19px"/>
<input type="password" name="pw13" style="width:19px"/>
<p><input type="button" style="position:relative;left:148px" onclick="check(this.form)" value="Enter"/>
<input type="button" style="position:relative;left:148px" onclick="location.href='entranceroom.html';" value="Cancel"/></p>
</form>
</div>
</div>
<script language="javascript">
function check(form) { /* function to check PW */
if((form.pw1.value === "C" || "c") &&
(form.pw2.value === "H" || "h") &&
(form.pw3.value === "R" || "r") &&
(form.pw4.value === "I" || "i") &&
(form.pw5.value === "S" || "s") &&
(form.pw6.value === "T" || "t") &&
(form.pw7.value === "M" || "m") &&
(form.pw8.value === "A" || "a") &&
(form.pw9.value === "S" || "s") &&
(form.pw10.value === "S" || "s") &&
(form.pw11.value === "N" || "n") &&
(form.pw12.value === "O" || "o") &&
(form.pw13.value === "W" || "w")) { /* check if above values match */
window.open("firstcorridor.html","_self"); /*open target page if they do */
}
else {
alert("Incorrect") /* display error message */
}
}
</script>
</body>
</html>CSS代码...
/* main page components */
#wrapper {
margin: 1px auto;
padding: 0;
border: 1px solid black;
width: 980px;
height: 650px;
}
#enterbutton {
margin: 0px auto;
padding: 0;
border: 0px;
z-index: +1;
}
#logo3bn {
margin: 0px auto;
padding: 0;
border: 0px;
}
#password{
margin: 1px auto;
padding: 0;
border: 1px solid white;
width: 490px;
height: 325px;
color: #fff5f6;
background-color: black;
font-family: cambria math;
font-size: large;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-17 08:15:08
按照您问题下的注释中的建议进行操作。
清理你的HTML，正确地关闭你的标签，避免内联样式和脚本。
然后，关于你的游戏，试试下面这样的东西。
只要您在keys对象中填写了键，并且它们的值与当前提交的表单ID匹配，这个简单的代码就可以处理无限数量的表单
var keys = {
door_1: "q",
door_2: "asd",
// add more door keys here
}
$("form.door").on("submit", function(e) {
e.preventDefault(); // Don't submit form
// Get all clues as concatenated lowercase string:
var clues = $(this).find(".clue").get().map(el => el.value).join("").toLowerCase();
// Check if concatenated clues match the key value
if ( clues === keys[ this.id ] ) {
console.log("GOOD!!!");
} else {
console.log("BAD LUCK");
}
});input.clue {
width: 20px;
text-align: center;
}<form class="door" id="door_1">
<p>Enter <b>Q</b> upper or lowercase to enter this door</p>
<input class="clue" maxlength=1 type=text>
<button type="submit">ENTER</button>
</form>
<form class="door" id="door_2">
<p>Enter <b>A S D</b> upper or lowercase to enter this door</p>
<input class="clue" maxlength=1 type=text>
<input class="clue" maxlength=1 type=text>
<input class="clue" maxlength=1 type=text>
<button type="submit">ENTER</button>
</form>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52845202
复制相关文章
相似问题