如何仅在客户端创建HTML登录页面？

Question

仅仅为了学习目的，我想制作一个不安全的HTML5“登录页面”来处理客户端的所有内容。

<div class="login">
            <input type="text" placeholder="username" name="username"><br>
            <input type="password" placeholder="password" name="password"><br>
            <input type="button" onclick="check(this.form)" value="Login">
            </div>

<script>
        function check(form) { 
            if(login.username.value == "guest" && login.password.value == "pwrd") {
                window.open('home.html')
            }
            else {
                alert("Error Password or Username")
            }
        }
</script>

Answer 1

验证应仅在客户端进行，验证如需要，字母数字，仅限数字等。检查用户名和密码应在服务器端完成，使用ajax和简单的PHP查询来检查表中的用户名和密码。

如果你正在寻找前端html，那么html5提供了很好的验证，就像所需的，只有电子邮件和数字。

例如：<input type="email" name="usermail" placeholder="[email protected]" required>

<input type="password" name="password" placeholder="password" required>

这是一个很好的创建登录表单的教程。 http://www.hongkiat.com/blog/html5-loginpage/

Answer 2

您无法使用JavaScript创建登录页面...用户可以修改您的脚本并绕过登录脚本。

此外，没有简单的登录系统。您必须使用数据库并验证每个页面以确保允许用户并登录。

Answer 3

你需要使用PHP：

1.html表格：

    <form action="your_page.php" method="POST">
      <input type="text" placeholder="username" name="username"><br>
      <input type="password" placeholder="password" name="password"><br>
      <input type="submit" name="submit" value="Connect" />
    </form>

2.php现在工作：

      <?php 

       if(isset($_POST['submit'])){    //when user click connect
          if(!empty($_POST['username']) && !empty($_POST['password'])){ 
               if ($_POST['username']=="guest" && $_POST['password']=="pwrd"){

               header("Location:home.php");
              }else{
           echo"check the password and username";
      }
        }else{
          echo"fill all the inputs";
         }
       }