js类名获取元素，样式无法设置的问题

最新推荐文章于 2023-11-24 10:19:03 发布

Gqw1997

最新推荐文章于 2023-11-24 10:19:03 发布

阅读量232

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/Gqw1997/article/details/132146677

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        form {
            margin: 50px 500px;
        }

        input {
            border: 1px solid #c1c1c1;
            border-radius: 10px;
            width: 250px;
            height: 30px;
        }

        p {
            font-size: 12px;
            color: gray;
            line-height: 20px;
            margin-bottom: 30px;
        }

        #sign {
            background-color: greenyellow;
            color: #fff;
            width: 120px;
            height: 40px;
            border: 0;
            border-radius: 5px;
            font-size: 20px;
        }

        #getnum {
            width: 80px;
            height: 30px;
            border: 1px solid green;
            color: green;
            background-color: #fff;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <form action="https://www.baidu.com">
        <input type="text" placeholder="昵称" id="username">
        <p class="p1">3~6个中文字符或数字或字母组合</p>
        <input type="password" placeholder="密码" id="password">
        <p class="p2">6~16个字符，区分大小写</p>
        <input type="password" placeholder="确认密码" id="checkpwd">
        <p class="p3">请再次填写密码</p>
        <input type="text" placeholder="手机号" id="phone-number">
        <p class="p4">请填写正确的手机号码</p>
        <input type="text" placeholder="请输入短信验证码" id="yznum"> <button id="getnum" type="button">获取验证码</button>
        <p class="p5">请填写手机验证码，不区分大小写</p>
        <button id="sign">立即注册</button>
    </form>
    <script>
        //获取元素
        let loginForm = document.querySelector('form')
        let userInput = document.getElementById('username')
        let pwdInput = document.getElementById('password')
        let CheckPwdInput = document.getElementById('checkpwd')
        let phoneNumInput = document.getElementById('phone-number')
        let yzmInput = document.getElementById('yznum')
        let getNumBtn = document.querySelector('#getnum')
        // let p1 = document.querySelector('.p1')
        let p1 = document.getElementsByClassName('p1')
        let p2 = document.querySelector('.p2')
        let p3 = document.querySelector('.p3')
        let p4 = document.querySelector('.p4')
        //正则判断
        let regUserName = /^[\u4e00-\u9fa5,\w]{3,6}$/
        let regpPwd = /^.{6,16}$/
        let regPhone = /^1[3-9]\d{9}$/
        //布尔值
        let bool1 = false
        let bool2 = false
        let bool3 = false
        let bool4 = false
        let bool5 = false
        loginForm.onsubmit = function (e) {
            //阻止默认事件
            let evt = event || e
            evt.preventDefault()
            //验证昵称
            let username = userInput.value
            if (username == ''){
                p1.style.color = 'red'
                bool1 = false
            } else{
                if (!regUserName.test(username)){
                p1.style.color = 'red'
                bool1 = false
            } else{
                p1.style.color = 'gray'
                bool1 = true
            }
            }

            //验证密码
            let pwd = pwdInput.value
            if (pwd == ''){
                p2.style.color = 'red'
                bool2 = false
            } else{
                if (!regpPwd.test(pwd)){
                p2.style.color = 'red'
                bool2 = false
            } else{
                p2.style.color = 'gray'
                bool2 = true
            }
            }
            //确认密码
            let checkPwd = CheckPwdInput.value
            if (checkPwd == ''){
                p3.style.color = 'red'
                bool3 = false
            } else{
                if (checkPwd != pwd){
                p3.style.color = 'red'
                bool3 = false
            } else{
                bool3 = true
                p3.style.color = 'gray'
            }
            }
            //手机号
            let phoneNum = phoneNumInput.value
            if (phoneNum == ''){
                p4.style.color = 'red'
                bool4 = false
            } else{
                if (!regPhone.test(phoneNum)){
                p4.style.color = 'red'
                bool4 = false
            } else{
                bool4 = true
                p4.style.color = 'gray'
            }
            }
            if (yzmInput.value == ''){
                p5.style.color = 'red'
                bool5 = false
            }
        }
        getNumBtn.onclick = function (){
            let str = ''
            for(let i=1;i<=4;i++){
                str += Math.round(Math.random()*9)
            }

                let phoneNum = phoneNumInput.value
            if (phoneNum == ''){
                p4.style.color = 'red'
                bool4 = false
            } else{
                if (!regPhone.test(phoneNum)){
                p4.style.color = 'red'
                bool4 = false
            } else{
                bool4 = true
                bool5 = true
                p4.style.color = 'gray'
                yzmInput.value = str
            }
            }         
        }
    </script>
</body>
</html>

使用选择器获取p1可以成功设置样式，但是使用类名获取元素设置样式会出现报错