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

时间:2015-06-09 06:47:34

标签: javascript html html5

出于学习目的,我想制作一个不安全的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>

3 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:0)

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

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

例如:<input type="email" name="usermail" placeholder="yourname@email.com" required>

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

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

答案 2 :(得分:0)

你需要使用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";
         }
       }