JavaScript实现简单的用户登录

最新推荐文章于 2022-06-17 20:25:00 发布

YOLO LAN

最新推荐文章于 2022-06-17 20:25:00 发布

阅读量8.9k

点赞数 17

文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_44969895/article/details/105603579

版权

利用js和h5表单相关知识点实现的用户登录窗口。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
<html>
    <head>
        <title> 简单的用户登录表单实现 </title>
        <style type="text/css">
        	a{color: #000000;font-size: 24px;}
            fieldset
            {
                margin:20px auto;
                width:600px;
                height:200px;
                padding:20px auto;
                color:#000000;
                text-align:center;
            }
            legend
            {
                color:#000000;
                font-size:24px;
                font-weight:bold;
                text-align:center;
            }
        </style>
        <script type="text/javascript">
            function checklogin()
            {
                var username=document.getElementById("myname").value;
                var pwd=document.getElementById("mypwd").value;
                if(username=="") 
                {
                    alert("用户名不能为空！！");
                    document.getElementById("myname").focus();
                    return false;
                }
                else
                {
                    if(username.length<8||username.length>20)
                    {
                        alert("用户名太短，应在8~20个字符之间！！");
                        document.getElementById("myname").focus();
                        return false;
                    }
                }
                if (pwd=="")
                {
                    alert("密码不能为空！！");
                    document.getElementById("mypwd").focus();
                    return false;
                }
                else
                {
                    if(pwd.length<8||pwd.length>20)
                    { 
                        alert("密码太短，应在6~20个字符之间！！");
                        document.getElementById("mypwd").focus();
                        return false;
                    }
                }
                return true;
            }
        </script>
    </head>
    <body>
        <form name="loginform" method="post" action="loginindex.html" onsubmit="return checklogin()">
            <fieldset>
                <legend align="center">用户登录</legend>
                <br><br>
                <label>用户名</label>
                <input type="text" name="" id="myname" ><br><br>
                <label>密&nbsp;&nbsp;&nbsp;码</label>
                <input type="password" name="" id="mypwd" ><br><br><br>
                <input type="submit" value="提交">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="reset">
            </fieldset>
        </form>
    </body>
</html>