具有多个条件的 Javascript 密码表单答案

【问题标题】：Javascript password form with multiple conditions具有多个条件的 Javascript 密码表单
【发布时间】：2019-03-21 13:28:58
【问题描述】：

我制作了一个网页游戏，其中涉及收集线索。最后，我有一个页面要求用户输入几个字符以便重定向到另一个页面。最后一条线索中的 13 个字母对应 13 个方框。所以我使用了一个基本的密码输入表单，删除了用户 ID 部分并在 js 代码中复制了具有多个条件的密码输入框。

每个框应该只有两个可接受的输入（大写/小写字母），并且它们都必须正确才能被重定向。否则，用户会收到一条错误消息。取消按钮应该只是将用户返回到上一页。稍后密码将存储在服务器端，但现在可以保留在代码中。

它在之前有点工作（我想），但是在添加 CSS 并玩弄外观之后它就停止工作了。现在，当我在任意数量的框中输入任何内容时，它可以让我转到最后一页。

注意：我花了几个小时在 SO 上寻找答案。我找不到任何与这个问题完全匹配的东西，我正在把头发扯掉！我是 javascript 的新手（并且对编码句号相当陌生）所以它可能是我缺少的一些基本的东西。

下面的代码（我已经包含了非表单位的代码，以防其中任何一个搞乱它）...

<!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>&nbsp; &nbsp; &nbsp; &nbsp; This door requires a code to unlock...<h3>
    <h1>L I K E &nbsp; &nbsp; 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"/>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        <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;
}

【问题讨论】：

请阅读：developer.mozilla.org/en-US/docs/Web/API/Document/bgColor
另外，要想找到游戏线索，只需阅读页面源代码并查看 JS 代码...
另外，避免内联style。请改用<style>s！
这就是密码最终会存储在服务器端的原因。现在我只是把所有的基础知识放在一起。虽然目标用户大约是 7-9 岁，所以我不确定他们是否会考虑检查。 :)
好的，谢谢 Roko。我没有意识到这一点，因此将编辑我的代码以匹配新的语法。

标签： javascript html css forms validation

【解决方案1】：

按照您的问题下的 cmets 中的建议进行操作。
清理您的 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>

【讨论】：

经过几天的实验，我得到了您上面的原始脚本的一个版本，效果很好。我还放弃并设置了一个私人服务器，设置了一个带有密码的 SQL 数据库，我现在正在尝试快速学习 PHP，因此我可以根据用户输入提取/检查数据库中的密码。但是我正在将您的代码用于游戏中的其他谜题，所以它非常有用。再次感谢您！