简易的表单验证

最新推荐文章于 2023-10-09 18:06:08 发布

JOKER_YELLOW

最新推荐文章于 2023-10-09 18:06:08 发布

阅读量270

点赞数 1

文章标签： css html js

本文链接：https://blog.csdn.net/weixin_44846862/article/details/108037883

版权

简易的后台登录界面

在这个给大家制作一个简易的后台登录界面，他使用到了：HTML，CSS,JS相关的知识，实现的大致功能就是：账户和密码不能为空，才能够登录（实现的功能比较简易，所以在点击登录之后我们就进入到百度中）

实现过程

HTML代码部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <--导入css文件样式-->
    <link rel="stylesheet" href="css/boke.css">

</head>
<body>
<!--主体-->
<div class="total">
    <!--登录-->
    <div class="login">
        <!--文字-->
        <div class="title">
            登录后台系统
        </div>

        <!--用户-->
        <form action="http://www.baidu.com" onsubmit="return logn(this)">
        <div class="user">
            <!--图标-->
            <div class="picture-u">
                <img src="img/用户_wps图片.png" height="32" width="32"/>
            </div>
            <div class="font-u">
                <input type="text" class="text-u" name="uname">
            </div>
        </div>

        <!--密码-->
        <div class="pwd">
            <div class="picture-p">
                <img src="img/密码_wps图片.png" height="32" width="32"/>
            </div>
            <div class="font-p">
                <input type="password" class="text-p" name="pwd">
            </div>
        </div>

        <div class="log">
                <button class="butt">登录</button>
        </div>
        </form>
    </div>

</div>
</body>
</html>

CSS代码部分：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
}

/*主体*/
.total{
    position: relative;
    width: 100%;
    height: 750px;
    background: black;
    background-image: url("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3488564163,1833081122&fm=26&gp=0.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
/*登录*/
.login{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -300px;
    margin-top: -170px;
    width: 600px;
    height: 340px;
    background: rgba(136,184,242,0.1);
    border: 1px solid black;
}

.title{
    padding-top: 40px;
    width: 100%;
    height: 100px;
    font-family: "华文行楷";
    font-size: 3em;
    text-align: center;
    background: yellow;
}

.user,
.pwd{
    position: relative;
    margin: 0 auto;
    margin-top: 15px;
    width: 400px;
    height: 50px;
    line-height: 50px;
    /*background: yellow;*/
}
.picture-u,
.picture-p{
    position: absolute;
    padding-left: 9px;
    top: 10px;
    width: 50px;
    height: 32px;
    background: rgb(238,238,238);
}

.text-u{
    position: absolute;
    padding-left: 20px;
    top: 10px;
    margin-left: 50px;
    width: 314px;
    height: 32px;
    background: white;
    border-style: none;
}
.text-p{
    position: absolute;
    padding-left: 20px;
    top: 10px;
    left: 50px;
    width: 314px;
    height: 32px;
    background: white;
    border-style: none;
}
.log{
    position: absolute;
    left: 99px;
    margin: 0 auto;
    margin-top: 20px;
    width: 364px;
    height: 32px;
}
.butt{
    width: 364px;
    height: 32px;
    background: green;
    border-style: none;
}

js代码部分：

<script>
    function logn(data) {
        var name = data.uname.value;
        var pwd = data.pwd.value;
        if (name.length<1||pwd.length<1){
            alert('请输入正确的用户名和密码')
            return false;
        } else{
            alert('登录成功！')
        }
    }
</script>

以上三部分代码就可以实现一个简单的表单验证了，下面请看网页的运行效果：

登录界面
如果只输入用户名或者只输入密码会提示登录失败
两者都输入时才能登录成功，点击确定，进入百度首页

这就是一个简单的表单验证，但是仅仅就是验证了用户框和密码框不能为空，至于要求输入的用户名和密码要正确的话，就要用到数据库了，这里就不再讲解了，上面的实现都是自己做的，如有错误，还请指出。

JOKER_YELLOW

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简易的表单验证

简易的后台登录界面在这个给大家制作一个简易的后台登录界面，他使用到了：HTML，CSS,JS相关的知识，实现的大致功能就是：账户和密码不能为空，才能够登录（实现的功能比较简易，所以在点击登录之后我们就进入到百度中）实现过程HTML代码部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>login</title>
复制链接

扫一扫