JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <div class="form_div">

        <div class="form_e  name_div">
            <input id="name" type="text" placeholder="輸入用戶名稱 ▴ ◂ ▾ ▸ ">
            <span id="name_span"></span>
        </div>

        <div class="form_e  pw_div">
            <input id="pw" type="password" placeholder="輸入密碼 ▴ ◂ ▾ ▸ ">
            <span id="pw_span"></span>
        </div>

        <div class="form_e  mail_div">
            <input id="mail" type="email" placeholder="輸入mail ▴ ◂ ▾ ▸ ">
            <span id="mail_span"></span>
        </div>

        <div class="form_e  register_div">
            <input onclick="register_cheak()" type="button" value="註冊">
            <input type="reset" value="清空">
        </div>

    </div>
    </form>

CSS

.form_div{
    
    width: 500px;
    height: 600px;

    font-family: Comic Sans MS , Microsoft JhengHei;

    background-color: rgb(228, 228, 228);
    border-radius: 10px;

    box-shadow: 7px 7px 12px rgba(0, 0, 0, 0.6);
}

.form_e{
    width: 350px;
    height: 50px;

    position: absolute;
    margin-left: 75px;

    /*border: 1px solid red;*/
}
.form_e input{
    width: 100%;
    height: 30px;

    box-sizing: border-box;

    text-indent: 5px;   
}
.form_e span{
    display: none;

    font-size: 12px;
    /*color: red;*/
}

.name_div{
    margin-top: 75px;
}
.pw_div{
    margin-top: 175px;
}
.mail_div{
    margin-top: 275px;
}
.register_div{
    margin-top: 450px;
    display: flex;
    justify-content:space-evenly; 
    align-items: center;
}

.register_div input{
    width: 40%;

    background-color: rgb(190, 190, 190);
    border: 0;
    border-radius: 5px;

    transition: 0.3s;
}
.register_div input:hover{
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.6);
    transform: scale(1.2);
}
.register_div input:active{
    transform: scale(1);
}

JavaScript

function register_cheak(){

    var name = document.querySelector('#name');
    var pw = document.querySelector('#pw');
    var mail = document.querySelector('#mail');

    if(name.value == "" || name.value.length > 40){
        console.log('名稱欄位問題');
        document.querySelector('#name_span').textContent = '**用戶暱稱不能為[空白]、必須在[40字以內]';
        document.querySelector('#name_span').style.color = 'red';
        document.querySelector('#name_span').style.display = 'block';
        name.style.backgroundColor = "#FFD2D2";
    }
    else{
        console.log('名稱欄位ok');
        document.querySelector('#name_span').textContent = '✔';
        document.querySelector('#name_span').style.color = 'green';
        document.querySelector('#name_span').style.display = 'block';
        name.style.backgroundColor = "#E8FFF5";

    }

    if(pw.value == "" || pw.value.length < 8 || pw.value.length > 100){
        console.log('密碼欄位問題');
        document.querySelector('#pw_span').textContent = '**密碼不能為[空白]、必須在[8字以上]、必須在[100字以內]';
        document.querySelector('#pw_span').style.color = 'red';
        document.querySelector('#pw_span').style.display = 'block';
        pw.style.backgroundColor = "#FFD2D2";
    }
    else{
        console.log('密碼欄位ok');
        document.querySelector('#pw_span').textContent = '✔';
        document.querySelector('#pw_span').style.color = 'green';
        document.querySelector('#pw_span').style.display = 'block';
        pw.style.backgroundColor = "#E8FFF5";
    }

    if(mail.value.includes('@') == false || mail.value == ""){
        console.log('mail欄位問題');
        document.querySelector('#mail_span').textContent = '**Email 信箱不能為[空白]、必須[包含 @ 符號]';
        document.querySelector('#mail_span').style.color = 'red';
        document.querySelector('#mail_span').style.display = 'block';
        mail.style.backgroundColor = "#FFD2D2";
    }
    else{
        console.log('mail欄位ok');
        document.querySelector('#mail_span').textContent = '✔';
       ...