JSFiddle - React, Tailwind, and code Playground

by master1991

HTML

<p class="form-input form-input__password">
  <label class="password label password__input-label" for="password">Пароль</label>
  <input class="password input password__input password__input-first" maxlength="250" type="password" name="user-password" id="password" required="">
</p>
<div class="password-rules">
  <h4 class="rules-heading">Password should have</h4>
  <ul class="list-reset rules-list">
      <li class="rule rule__length"> at least 10 symbols</li>
      <li class="rule rule__capital">a capital letter</li>
  </ul>
</div>

JavaScript

let reg = /[A-Z]/;
let pInput = document.querySelector(".password__input");
let ruleLenght= document.querySelector(".rule__length");
let ruleCapital= document.querySelector(".rule__capital");

pInput.addEventListener("keyup", function(){
if(pInput.value.length < 10) {
  ruleLenght.style.color = "red";
  ruleCapital.style.color = "red";
}else{


  ruleLenght.style.color = "green";
  if(!reg.test(pInput.value)){
    ruleCapital.style.color = "red";
  }else{
    ruleCapital.style.color = "green";
  }
  
  
}
});