注册小案例

注册小案例

1、效果图:

2、代码详细

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册界面title>
    <style>
        *{
            padding: 0;
            margin: 0;
            color: #000;
        }
        body{
            position: relative;
        }
        .index{
            position: relative;
        }
        img{
            position: fixed;
            width: 1920px;
            /* left: 100px; */
        }
        .zhu{
            position: absolute;
            width: 380px;
            height: 480px;
            background-color: rgba(250, 250, 250,0.47);
            left: 750px;
            top: 225px;
            border-radius:7%;
            /* 毛玻璃 */
            /* background: inherit; */
            -webkit-filter: blur(4px);
            -moz-filter: blur(4px);
            -ms-filter: blur(4px);
            -o-filter: blur(4px);
            filter: blur(4px);
            filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false);
            box-shadow: 5px 7px 27px rgba(0, 0, 0,0.47);
            /* 跑马灯 */
            overflow: hidden;
            -webkit-animation: zhu 15s linear infinite;
            animation: zhu 15s linear infinite;
        }

        h1{
            position: absolute;
            left: 125px;
            margin-top:  30px;
            /* margin-bottom: 40px; */
        }
        .shu{
            position: absolute;
            left: 814px;
            top: 270px;
        }
        .shu input{
            display: block;
            width: 247px;
            height: 37px;
            background-color:transparent;
            border: 2px solid rgb(9, 186, 240);
        }
        .shu p{
            font-size: 20px;
            margin-top: 20px;
         }
         .shu h2{
            margin-left: 77px;
            font-size: 27px;
         }
         .tijiao{
            position: absolute;
            top: 600px;
            left: 814px;
            /* margin-top: 20px; */
         }
         .tijiao input{
            width: 247px;
            height: 37px;
            font-size: 17px;
            background-color:transparent;
            border: 2px solid rgb(9, 186, 240);
            cursor:pointer;
         }
         #z_error{
            display: none;
         }
    style>
head>
<body>
<form action="#">
    <img src="1169134.jpg" alt="火影忍者">
    <div class="index">
        <div class="zhu">div>         
            <div class="shu">
                <h2>注册用户h2>
                <p>用户名:p>
                <input type="text" placeholder="用户名的长度为5字符" name="name" maxlength="8" id="user">
                <span style="position: absolute;right: 0;color: rgb(255, 1, 1);" id="z_error">你的用户名长度不符合span>
                <p>密码:p>
                <input type="password" name="password" placeholder="密码的长度为6-18字符" id="password">
                <span style="position: absolute;right: 0;color: rgb(255, 1, 1);" id="z_error">你的密码长度不符合span>
                <p>确认密码:p>
                <input type="password" name="password" placeholder="密码的长度为6-18字符" id="password">
                <span style="position: absolute;right: 0;color: rgb(255, 1, 1);" id="z_error">前后密码不一致span>
            div>
            <div class="tijiao">
                <input type="submit" value="免费注册" id="succes">
            div>
    div>
    <script>
        var user = document.querySelector("#user");
        var password = document.querySelectorAll("#password")
        var z_error = document.querySelectorAll("#z_error");
        var succes = document.querySelector("#succes");
        var flag = false;
        var rag = 0;
        user.addEventListener('blur',function(){
            rag = /^.{0,5}$/;  //匹配长度为5的任意字符
            var z_name = user.value.trim();
            if (rag.test(z_name)){
                flag = true;
                z_error[0].style.display = 'none';
            }else{
                flag = false;
                z_error[0].style.display = 'block';
            }
        });
        var z_pwd = 0;
        password[0].addEventListener('blur',function(){
            rag = /^[0-9a-zA-Z]{6,16}$/;  //匹配只含有数字和字母的字符
            z_pwd = password[0].value;
            if (rag.test(z_pwd)){
                flag = true;
                z_error[1].style.display = 'none';
            }else{
                flag = false;
                z_error[1].style.display = 'block';
            }
        });
        password[1].addEventListener('blur',function(){
            var z_pwd1 = password[1].value;
            if (z_pwd == z_pwd1){
                flag = true;
                z_error[2].style.display = 'none';
            }else{
                flag = false;
                z_error[2].style.display = 'block';
            }
        });
        succes.addEventListener('click',function (e){
            if (flag == false){
                e.preventDefault();
            }
        });
    script>
form>
body>
html>

你可能感兴趣的:(css,css3,html)