注册

 

 

<!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>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        position: relative;
        top: 100px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #00CCFF;
        width: 500px;
        height: 350px;
    }
    .zhuce{
        display: block;
        height: 60px;
        background-color: #0099CC;
        color: white;
        text-align: center;
        font-weight: bold;
        font-size: 24px;
        line-height: 30px;
    }
    input{
        margin-left: 90px;
        display: block;
        height: 40px;
        width: 300px;
    }
    .c1{
        margin-top: 40px;
    }
    .container div{
        margin: 0px 100px;
        height: 35px;
        color: red;
        font-size: 12px;
        line-height: 35px;
    }
    button {
        margin-left: 90px;
        width: 300px;
        height: 35px;
        color: #fff;
        background-color: #0099CC;
        border: 1px solid grey;
        cursor: pointer;
    }
</style>
<body>
    <div class="container">
        <span class="zhuce">注册</span>
        <input type="username" class="c1" id="username" placeholder="请输入您的用户名">
        <div class="userNotice"></div>
        <input type="password" id="password" placeholder="请输入您的密码">
        <div class="passwordNotice"></div>
        <button id='subBtn'>提交</button>
    </div>
</body>
<script>
    let username=document.getElementById('username')
    let password=document.getElementById('password')
    let userNotice=document.getElementsByClassName('userNotice')[0]
    let passwordNotice=document.getElementsByClassName('passwordNotice')[0]
    let sub=document.getElementById('subBtn')
    sub.addEventListener('click',()=>{
            let uValue = username.value
            let keycode = uValue.charCodeAt(0)
            userNotice.innerHTML = ''
            if (uValue.length<6 || uValue.length>18) {
                userNotice.innerHTML = '用户名长度必须为6到18位!'
            } else if (keycode < 65 || (keycode > 90 && keycode < 97) || keycode > 122) {
                userNotice.innerHTML = '用户名必须以英文字母开头!'
            } 
            passwordNotice.innerHTML = ''
            if (password.value.length < 6) {
                passwordNotice.innerHTML = '密码不能少于六位!'
            }
    })
    
</script>
</html>

 

posted @ 2021-04-22 22:17  Sherlockmmc  阅读(78)  评论(0)    收藏  举报