Question

我正在尝试创建像facebook这样的登录页面。使用的html和javascript我设法用预定义的用户名和密码创建登录页面。如果你键入正确的密码，它将重定向到新的页面。但是，如果您输入错误的密码或用户名，那么它将在文本框一侧显示错误消息，如真正的Facebook

我的代码是

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fakebook -Login</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body class="login">
<div id="facebook-Bar">
  <div id="facebook-Frame">
    <div id="logo"> <a href="">Facebook</a> </div>


       <br>
       <br>
       <br>
       <br>

<div class="loginbox radius">
<h2 style="color:#141823; text-align:center;">Log in to Facebook</h2>
    <div class="loginboxinner radius">
        <div class="loginheader">
        </div>

        <div class="loginform">

            <form id="login" action="" method="post">
                <p>
                    <input type="text" id="username" name="username" placeholder="Your Email" value="" class="radius" />
                </p>
                <p>
                    <input type="password" id="password" name="password" placeholder="Password" class="radius" />
                </p>
                <p>
                    <button class="radius title" onclick="check(this.form)" name="client_login">Log In</button>
                </p>
  <script language="javascript">
    function check(form)
     {
      if(form.username.value == "rohit" && form.password.value == "password")
       {
        window.open('target.html')
       }
     else
      {
       document.getElementById("username").innerHTML = "wrong username"
      }
     }
   </script>

        <br>
        <br>
    <a href="" style="color:#0000FF; text-decoration:none">forgot your password?</a></label></td>
<a href="" style="color:#0000FF; text-decoration:none">| sign up for facebook</a></label></td>
            </form>
        </div>
    </div>
</div>

</body>

</html>

这是facebook错误消息

像facebook一样的Javascript表单验证错误

0 个答案: