Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/79.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何修复登录检查?_Javascript_Html_Login - Fatal编程技术网

Javascript 如何修复登录检查?

Javascript 如何修复登录检查?,javascript,html,login,Javascript,Html,Login,我已经用html创建了一个登录页面,我在使用我创建的一个函数检查登录是否正确时遇到了困难,如果它是正确的,它将把它带到主页。这一切都已创建,但尚未创建 我已经尝试在中编辑代码,并在代码的不同区域实现我的功能。我还试着看了各种不同的教程和登录编码示例,但都非常不成功 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, ini

我已经用html创建了一个登录页面,我在使用我创建的一个函数检查登录是否正确时遇到了困难,如果它是正确的,它将把它带到主页。这一切都已创建,但尚未创建

我已经尝试在中编辑代码,并在代码的不同区域实现我的功能。我还试着看了各种不同的教程和登录编码示例,但都非常不成功

<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
    body {
      font-family: cursive;
      font-weight: bold;
      font-size: 20px;
      background-color: #1E90FF;
      text-align: center;
    }

    * {
      box-sizing: border-box;
    }
    /* style the container */
    .container {
      border-radius: 0px;
      background-color: #1E90FF;
      padding: 10px 300px 10px 300px;
    } 

    /* style inputs and link buttons */
    input,
    .btn {
      width: 100%;
      padding: 20px;
      border: none;
      border-radius: 9px;
      margin: 10px 30px;
      opacity: 0.85;
      display: inline-block;
      font-size: 17px;
      line-height: 20px;
      text-decoration: none; 
    }

    input:hover,
    .btn:hover {
      opacity: 5;
    }


    /* style the submit button */
    input[type=submit] {
      background-color: #4CAF50;
      color: white;
      cursor: pointer;
    }

    input[type=submit]:hover {
      background-color: #4CAF50;

    }

    /* bottom container */
    .bottom-container {
      text-align: center;
      background-color: #1E90FF;
      border-radius: 0px 0px 4px 4px;

    }
    </style>
    </head>
    <body>

    <h2>DIVIDE AND CONQUER THE TIMES!</h2>
    <p>Please Login to experience a world of numbers and games!</p>

    <div class="container">
      <form action="/action_page.php">
        <div class="row">
          <h2 style="text-align: Center">LOGIN</h2>
          </div>

            <input type="text" name="username" placeholder="Username" required>
            <input type="password" name="password" placeholder="Password" required>
            <input type="submit" value="Login">
          </div>

        </div>
      </form>
    </div>

    <div class="bottom-container">
      <div class="row">
       <a href="#" style="color:white" class="btn">Forgot password?</a>
        <div class="col">
        </div>
      </div>
    </div>

    <script language="javascript">
    function check(form)
    {
    if (form.username.value)=="myusername" && form.password.value == "mypassword")
    {
    window.open('MainMenu.html')
    }
    else
    {
    alert ("Error Password or Username")
    }
    }

    </body>
    </html>

身体{
字体系列:草书;
字体大小:粗体;
字体大小:20px;
背景色:#1E90FF;
文本对齐:居中;
}
* {
框大小:边框框;
}
/*设置容器的样式*/
.集装箱{
边界半径:0px;
背景色:#1E90FF;
填充:10px 300px 10px 300px;
} 
/*样式输入和链接按钮*/
输入
.btn{
宽度:100%;
填充:20px;
边界:无;
边界半径:9px;
利润率:10px 30px;
不透明度:0.85;
显示:内联块;
字号:17px;
线高:20px;
文字装饰:无;
}
输入:悬停,
.btn:悬停{
不透明度:5;
}
/*设置提交按钮的样式*/
输入[类型=提交]{
背景色:#4CAF50;
颜色:白色;
光标:指针;
}
输入[类型=提交]:悬停{
背景色:#4CAF50;
}
/*底部容器*/
.底部容器{
文本对齐:居中;
背景色:#1E90FF;
边界半径:0px 0px 4px 4px;
}
分而治之!
请登录体验数字和游戏的世界

登录 功能检查(表格) { if(form.username.value)=“myusername”和&form.password.value==“mypassword”) { window.open('MainMenu.html') } 其他的 { 警报(“错误密码或用户名”) } }

我希望我的登录能够检查密码和用户名,因此如果正确,则可以移动到其他html页面,而当前没有,并且仅移动到空白页面,并且无法确认密码或用户名是否正确。

除了@Connum评论的内容外,还有一些问题:

1-您的
标记未在文件末尾关闭。您应该在javascript代码之后添加一个
结束标记(或者,您可以将javascript与HTML分开,正如我在下面所做的那样)

2-您的函数
检查
已定义,但从未调用过。假设您希望在提交表单时调用它,那么您将需要一个事件处理程序,它将在提交代码时调用您的函数。在下面的代码片段中,我使用的是
onsubmit

3-
form.username.value
不是选择DOM元素的有效方法。为此,可以使用jQuery选择器,也可以使用原生的
getElementById
函数(或类似函数)

下面是一个解决这些问题的片段(删除CSS以减少混乱)

函数检查(){
var userField=document.getElementsByName(“用户名”)[0];
var pwdField=document.getElementsByName(“密码”)[0];
if(userField.value==“myusername”&&pwdField.value==“mypassword”){
window.open('main menu.html');
返回true;
}
否则{
警报(“错误密码或用户名”);
返回false;
}
}

分而治之!
请登录体验数字和游戏的世界

登录
在我看来,您使用的编辑器没有突出显示语法。在
下面应该有一个
结尾,在JavaScript中,在
==“myusername”
前面有一个括号,它打破了代码。你也会注意到,通过在浏览器中按F12键查看开发人员工具的控制台,我已经修改了我的代码,并修复了所有我认为似乎有问题的代码,但它仍然不起作用。