JSFiddle - React, Tailwind, and code Playground

by shnny

HTML

<div class="cantainer">
  <form class="formAll"action="">
    <ul>
        <li>
            <label for="usename">用戶暱稱<span>*</span></label><br>
            <input class= "usename"id="usename"type="text">
            <p class="usename-text" style="display:none;">不能為空白、必須在40字以內</p>
        </li>
        <li>
            <label for="email">Email 信箱<span>*</span></label><br>
            <input class="email"id="email" type="email">
            <p class="email-text" style="display:none;">不能為空白、必須包含 @ 符號</p>
        </li>
        <li>
            <label for="password">密碼 <span>*</span></label><br>
            <input class="password"id="password"type="password">
            <p class="password-text" style="display:none;">不能為空白、必須在8字以上、必須在100字以內</p>
        </li>
    </ul>
    
   <div class="btn-div">
     <button>註冊</button>
   </div>
  </form>

   
    
</div>

CSS

body{
  height: 100vh;
  background: #D3A4FF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
span{
  color: red;
  margin-left: 2px;
}
.cantainer{
  padding:60px;
  border: 1px solid #FFF;
  border-radius: 10px;
  background:#4B0091;
  color: #D3A4FF;
}
li{
  display: flex;
  flex-direction: column;
}

li input{

  border-radius: 5px;
  padding: 2px;
}
.btn-div{
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.btn-div button{
  padding: 3px;
  width: 100px;
  border-radius: 5px;
  cursor:pointer;
}
li p {
  margin-top: 3px;
  font-size: 10px;
  color: red;
}
label{
  margin-top: 3px;
}

JavaScript

const form = document.querySelector('.formAll')
const usename = form.querySelector('.usename')
const email = form.querySelector('.email')
const password = form.querySelector('.password')
const usenameText = form.querySelector('.usename-text')
const emailText = form.querySelector('.email-text')
const passwordText = form.querySelector('.password-text')
const inputAll = document.querySelectorAll('input')

form.addEventListener('submit',(e)=>{
	e.preventDefault()
  let isValue = true
  //驗證暱稱
	if(usename.value.trim() === '' ){
  	usenameText.style.display = 'block'
    isValue = false
  }else{
  	usenameText.style.display = 'none'
  }
  //驗證信箱
  if(email.value.trim() === '' || !email.value.includes('@')){
  	emailText.style.display = 'block'
    isValue = false
  }else{
  	emailText.style.display = 'none'
  }
  
  //驗證密碼
  if(password.value.trim() === '' || password.value.length< 8 || password.value.length> 100){
  	passwordText.style.display = 'block'
    isValue = false
  }else{
  	passwordText.style.display = 'none'
  }
  
  for(let i = 0 ; i<inputAll.length ; i++){
  	inputAll[i].addeventListener('input',(e)=>{
    	const warnText = inputAll[i].parentNode.querySelector('p')
      warnText.style.display = 'none' ;
    })
  }
  if (isValue) {
        console.log('表單驗證通過，可以提交表單了！');
    }
})