登录/注册

news2024/9/22 15:29:38

1.HTML

2.CSS

3.JS

4.资源

5.运行结果

6.下载链接

7.注意事项

1.HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="../css/register.css">
</head>
<body>
    <div class="register">
        <div class="cont">
            <ul class="list">
                <li>
                    <span>用户名</span>
                    <input type="text" class="userName">
                    <img src="../image/sure.png" alt="必填">
                </li>
                <li>
                    <span>Email</span>
                    <input type="email" class="email">
                    <img src="../image/sure.png" alt="必填">
                </li>
                <li>
                    <span>密码</span>
                    <input type="password" class="password">
                    <img src="../image/sure.png" alt="必填">
                </li>
                <li class="qiang">
                    <span>密码强度</span>
                    <p>
                        <span class="weak">弱</span>
                        <span class="medium">中</span>
                        <span class="strong">强</span>
                    </p>
                </li>
                <li>
                    <span>确认密码</span>
                    <input type="password" class="passwordTrue">
                    <img src="../image/sure.png" alt="必填">
                </li>
                <li>
                    <span>MSN</span>
                    <input type="text" class="msn">
                </li>
                <li>
                    <span>QQ</span>
                    <input type="text" class="qq">
                </li>
                <li>
                    <span>办公电话</span>
                    <input type="text" class="tel">
                </li>
                <li>
                    <span>家庭电话</span>
                    <input type="text" class="phone">
                </li>
                <li>
                    <span>手机</span>
                    <input type="text" class="mobile">
                </li>
                <li class="yan">
                    <span>验证码</span>
                    <input type="text">
                    <p class="yanMa">J6EP</p>
                </li>
                <li>
                    <span></span>
                    <input type="checkbox" class="agree">
                    <p>我已看过并接受《<a href="##">用户协议</a>》</p>
                </li>
                <li>
                    <span></span>
                    <button class="btn">立即注册</button>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>
<script src="../js/register.js"></script>

2.CSS

*{margin: 0;padding: 0;}
ul,li,ol{list-style-type: none;}
button{cursor: pointer;border: none;background: rgba(255, 255, 255, 1);}
.register{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cont{
    width: 320px;
    height: 450px;
    background: #fbfbfb;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.list{
    width: 270px;
}
.list li{
    width: 100%;
    height: 20px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 12px;
}
.list li span{
    width: 60px;
    height: 100%;
    line-height: 20px;
    text-align: right;
    margin-right: 10px;
}
.list li input{
    /* width: 180px; */
    height: 100%;
    border: 1px #ccc solid;
}
.list li img{
    width: 10px;
    height: 10px;
    margin-left: 10px;
}
.list li p{
    margin-left: 10px;
}
.list .qiang p{
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.list .yan input{
    width: 80px;
}
.list .yan p{
    width: 80px;
    height: 100%;
    line-height: 20px;
    text-align: center;
    border: 1px #ccc solid;
    background: url(../image/yan.png) no-repeat 0 0/100% 100%;
    color: #fff;
}
.btn{
    width: 100px;
    height: 40px;
    background: #4da4d2;
    color: #fff;
    margin-top: 10px;
    border-radius: 5px;
}
.yanMa{
    cursor: pointer;
}

3.JS

let btn = document.querySelector('.btn');
    let userName = document.querySelector('.userName');
    let email = document.querySelector('.email');
    let password = document.querySelector('.password');
    let passwordTrue = document.querySelector('.passwordTrue');
    let msn = document.querySelector('.msn');
    let qq = document.querySelector('.qq');
    let tel = document.querySelector('.tel');
    let phone = document.querySelector('.phone');
    let mobile = document.querySelector('.mobile');
    let yan = document.querySelector('.yan input');
    let yanMa = document.querySelector('.yanMa');
    let agree = document.querySelector('.agree');
    let weak = document.querySelector('.weak');
    let medium = document.querySelector('.medium');
    let strong = document.querySelector('.strong');

    // 密码强度
    function checkPasswordStrength(password) {
        if(password.length<5){
            alert('最少输入6位密码');
        }else if(password.length>25){
            alert('最多输入26位密码');
        }else{
            let code=0;
            const hasNumber = /\d/;  // 包含数字
            const hasLetter = /[a-zA-Z]/;  // 包含字母
            const hasSymbol = /[!@#$%^&*(),.?":{}|<>]/;  // 包含特殊字符

            if (hasNumber.test(password)) code++;
            if (hasLetter.test(password)) code++;
            if (hasSymbol.test(password)) code++;

            // 检查密码强度
            if (code==1) {
                weak.style.color='#f00';
                medium.style.color = '#000';
                strong.style.color = '#000';
            } else if (code==2) {
                weak.style.color='#000';
                medium.style.color = '#f00';
                strong.style.color = '#000';
            } else if (code==3) {
                weak.style.color='#000';
                medium.style.color = '#000';
                strong.style.color = '#f00';
            } else {
                weak.style.color='#000';
                medium.style.color = '#000';
                strong.style.color = '#000';
            }
        }
    };
    // 失焦判断密码强度
    password.onblur=function(){
        checkPasswordStrength(password.value);  
    }
    // 验证码
    function yanZheng(){
        // 包含所有可能的字符
        const characters = '0123456789abcdefghijklmnopqrstuvwxyz';
        // 生成四位验证码
        let verificationCode = '';
        for (let i = 0; i < 4; i++) {
            const randomIndex = Math.floor(Math.random() * characters.length);
            verificationCode += characters.charAt(randomIndex);
        }
        yanMa.innerHTML=verificationCode.toUpperCase();
    };
    yanZheng();
    // 点击验证码刷新验证码
    yanMa.onclick=function(){
        yanZheng();   
    };

    // 点击注册按钮
    btn.onclick=function(){
        let yanEmail = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        let yanTel = /^1[3-9]\d{9}$/;
        let dataObj={
            userName:userName.value,
            email:email.value,
            password:password.value,
            msn:msn.value,
            qq:qq.value,
            tel:tel.value,
            phone:phone.value,
            mobile:mobile.value,
        };
        yan.value=yan.value.toUpperCase();
        if(userName.value==''){
            alert('请输入用户名');
        }else if(email.value==''){
            alert('请输入Email');
        }else if(!yanEmail.test(email.value)){
            alert('请输入正确的Email');
        }else if(password.value==''){
            alert('请输入密码');
        }else if(passwordTrue.value==''){
            alert('请确认密码');
        }
        else if(password.value!=passwordTrue.value){
            alert('两次密码输入不一致，请重新输入。')
        }else if(yan.value==''||yan.value!=yanMa.innerHTML){
            console.log(yan.value,yanMa.innerHTML);
            if(confirm('验证码输入不正确，请重新输入')){
                yanZheng();
            }else{
                yanZheng();
            }
        }else if(!agree.checked){
            if(confirm('请同意用户协议')){
                agree.checked=!agree.checked;
            }else{
                
            }
        }
        else{
            fetch('http://localhost:8080/api/register',{
                method: 'POST',
                headers: {
                'Content-Type': 'application/json', // 设置请求头的 Content-Type
                },
                body: JSON.stringify(dataObj)
            }).then(response => response.json()).then(data => {
                console.log(data);
                if(data.code==200){
                    alert('注册成功');
                }
            }).catch(error => {
                console.error('Error:', error);
            });
        }
    };