利用html+css+js正则写经典登录界面

最新推荐文章于 2024-04-30 07:44:17 发布

sun*san

最新推荐文章于 2024-04-30 07:44:17 发布

阅读量761

点赞数 3

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/m0_63263973/article/details/125624854

版权

这段时间学习了Javaweb前端的一些东西，然后通过这次登录页面的编码巩固一下之前的知识。

页面截图如下

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        html{
            height: 100%;
        }
        body{
            height: 100%;
        }
        #grad{
            width: 100%;
            height: 100vh;
            background-image: linear-gradient( #d299c2 0%, #fef9d7 100%);
            background-size: 100% 100%;
        }
        .login-page{
            background-color: #fff;
            opacity: 0.7;
            width: 358px;
            height: 588px;
            border-radius: 15px;
            padding: 0 20px;
            position : relative;
            left: 800px;
            right: 1158px;
            top: -230px;
            bottom: 258px;
        }
        .header{
            background-image: linear-gradient( #d299c2 0%, #fef9d7 100%);
            background-clip:text;
            -webkit-background-clip:text;
            color: transparent;
            font-size: 40px;
            font-weight: bold;
            text-align: center;
            line-height: 200px;
            letter-spacing: 30px;
        }
        .form-text{
            display: block;
            width: 90%;
            margin-bottom: 20px;
            border:0;
            padding: 10px ;
            border-bottom: 2px solid #D39BC2;
            font-size: 15px;
            outline: none;

         }
        .form-button{
            /*border: 0;*/
            border-color: #F6E8D3;
            border-radius: 10px;
            background-color: #D39BC2;
            width: 90%;
            display: block;
            margin-top: 20px;
            padding: 10px;
            font-size: 20px;
            align-content: center;
            color: white;
            font-weight: bold;
            font-family: "黑体";
        }
        .msg-text{
            font-size: 13px;
            color: darkred;
            left: 50px;
        }
        .logo{
            padding: 50px 0px 0px 50px;
            height: 50px;
            width: 50px;
        }
        .logo-text{
            color: #D42B7F;
            font-size: 25px;
        }
        .logo-msg{
            padding: 100px;
            color: white;
            font-size: 50px;
            padding: 100px 0px 20px,50px;/*上右下左*/
            padding-left: 150px;
            padding-top: 160px;
        }
        .logo-msg02{

            font-size: 20px;
            color: white;
            opacity: 0.7;
            padding-left: 150px;
        }
        .error{
            font-size: 5px;
            color: darkred;
        }
    </style>
</head>
<body>
<div id="grad">
   <img src="../img/logo.png" class="logo"><b class="logo-text">CSDN</b>
    <br><br><br><br><br><br><br><br><br><br>
    <b class="logo-msg">        用知识改变生活</b>
    <div class="logo-msg02">       技术人都爱的网络社区</div>
    <div class="login-page">
        <div class="header">登录</div>
<div class="form">
    <form action="#" method="post">
        <input type="text" id="username" name="username" placeholder="请输入手机号/邮箱" class="form-text"><br><br>
        <input type="password" name="password" placeholder="请输入密码" class="form-text"><br><br>
        <div id="error" style="display: none" class="error"  align="center">手机号或邮箱格式错误！</div>
        <input type="button"  id="login" onclick="on()" value="登    录" class="form-button"><br>
    </form>

        <center class="msg-text">没有账号？立即注册</center>
</div></div></div>
<script>
    function on() {
        var username=document.getElementById("username");
        var usernameText=username.value.trim();
        var REGEX=/^1[3|4|5|7|8][0-9]{9}$/
        var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        var p = reg.test(usernameText);
        var q=REGEX.test(usernameText)
        if(!p&&!q){
            document.getElementById("error").style.display="";
        }
    }
</script>
</body>
</html>