登录界面

最新推荐文章于 2021-10-19 16:41:55 发布

卑微小童

最新推荐文章于 2021-10-19 16:41:55 发布

阅读量322

点赞数

分类专栏： html 文章标签： html css js

本文链接：https://blog.csdn.net/weixin_43519121/article/details/107200776

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

简单的登录界面

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="http://localhost:8080/book/">
    <meta charset="UTF-8">
    <title>登录</title>
    <style type="text/css">
        @import url("static/css/login.css");
    </style>
</head>
<body>
    <div class = "title">
        <div id="logo">
            <img src="static/img/logo.png" width="">
        </div>
    </div>
    <div class="main">
        <div class="formbox">
            <h1>登录</h1>
            <form action="loginServlet" method="post">
                <label>用户姓名：</label>
                <input type="text" class="inputfield"  name = "username" placeholder="请输入用户名" /><br><br>
                <label>用户密码：</label>
                <input type="password" class="inputfield"  name = "password" placeholder="确认密码" /><br><br>
                <label>验证码：&nbsp&nbsp&nbsp</label>
                <input type="text" class="inputfield"  name="check_code" placeholder="请输入密码" />
                <img alt="" src="#" width="10px"><br /><br />
                <input type="submit" value="登录" id="sub_btn" />
            </form>
        </div>
    </div>
</body>
</html>

CSS部分

body{
    background: url("../img/login_bg.jpg") no-repeat fixed;
    background-position: 0px 0px;
    background-size: cover;
}
#logo{
    float: left;
    margin-left: 15px;
    margin-top: 15px
}
#logo img{
    width: 200px;
}
.main{
    height: 500px;
}
.formbox{
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    text-align: center;
    width: 450px;
    height: 350px;
    margin: 0 auto;
    padding: 10px;
    background: rgba(0,0,0,0.7);
    border-radius: 30px;
}
.formbox h1{
    font-weight: 400;
    font-size: 40px;
    font-family: 'Vibur', cursive;
    color: white;
}
.formbox form{
    margin: 0 auto;
    color: white;
    background-color: transparent;
    margin-top: 50px;
}
.formbox input{
    outline: none;
    border:none;
    color: white;
    background-color: transparent;
    border-bottom: 1px solid white;
    font-size: 18px;
}
#sub_btn{
    margin-top: 15px;
    background-color: aqua;
    border-radius: 15px;
    border: 0px;
    height: 40px;
    width: 80px;
    font-size: 20px;
}

JQuery部分

$(function() {
    $("#sub_btn").click(function(){
        //验证用户名由字母数字下划线组成
        var username = $("#username").val();
        var usernamePatt = /^\w{5,12}$/;
        if(!usernamePatt.test(username)){
            $("#errorMsg").text("用户不合法!");
            return false;
        }
        var password = $("#password").val();
        var passwordPatt = /^\w{5,12}$/;
        if(!passwordPatt.test(password)){
            $("#errorMsg").text(password);
            return false;
        }

        if($("#repwd").val()!=password){
            $("#errorMsg").text("密码不一致");
            return false;
        }

        var email = $("#useremail").val();
        var emailPatt = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        if(!emailPatt.test(email)){
            $("#errorMsg").text("邮箱不合法");
            return false;
        }
        var checkcode = $("#checkcode").val();
        checkcode = checkcode.trim();
        if(checkcode==null||checkcode==""){
            $("#errorMsg").text("验证码不能为空");
            return false;
        }
        $("#errorMsg").text("");

    });
});

效果：