2024/02/01

编写一个简单的登录界面

<html>
<head>
    <title>JSP - Hello World</title>
</head>
<body background="imagine/鸡哥头.jpg" style="background-repeat:no-repeat;background-attachment:fixed;background-size:100% 100%">

<div style="text-align: center">

<h1> 登录界面</h1><br>
    <form method="post" id="login" action="success.html">
        账号<input type="text" name="nameid" id="nameid"><br>
        密码<input type="password" name="pwd" id="pwd"><br>
        <span id="msg" style="font-size: 12px;color:red"></span><br>
        <button type="button" id="btm">登录</button>
    </form>
    <script>
            document.getElementById("btm").addEventListener("click", function(){
            var a=confirm("确认登录嘛？");
            if(!a)
            {
                document.getElementById('msg').innerHTML="您已取消登录";
                return;
            }
            var id=document.getElementById("nameid").value;
            var pwd=document.getElementById("pwd").value;
            if(!is(id))
            {
                document.getElementById('msg').innerHTML="您的账号不能为空";
                return;
            }
            if(!is(pwd))
            {
                document.getElementById('msg').innerHTML="您的密码不能为空";
                return;
            }
            document.getElementById('login').submit();
        });
            function is(s)
            {
                if (s.length==0||s.trim()=="")
                    return false;
                else return true;
            }
    </script>
</div>
</body>
</html>

登录时会跳出弹窗问是否确认登录

登录前会验证账号和密码是否为空，空的话会给出提示

posted @ 2024-02-03 19:11  伐木工熊大  阅读(14)  评论(0)  编辑  收藏  举报