strongPass

password regex

by trentHarlem

HTML

<div>
 
<label for="example">Enter strong password</label>
<input type='password' id='pass'>
<meter max="4" id="password-strength-meter"></meter>
<p id="password-strength-text"></p>
<blockquote id='hint'>
password MUST be more then 8 characters long and <br>
MUST include numbers, lowercase and UPPERcase letters<br>
and at least one special character (!@#$%)
</blockquote>
 </div>
 <div>
   <input type="submit" id='submit' value="Send">
 </div>
<div>
   <button onclick="location.reload()">RESET</button>

 </div>
<p id='message'>

</p>

CSS

* body{
  font: 22px system-ui;
  background-color: lightblue;
}
#password-strength-meter {
  text-align: center;
}
#hint {
  font-size: 14px;
}

JavaScript

const strongPass = /((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[\W]).{8,64})/
const pass = document.getElementById('pass')
const submit = document.getElementById('submit')

//const isStrong = () 


const isStrong = () => {
  x = pass.value;
  //document.getElementById('message').innerHTML = "You wrote: " + x;
  if (!x.match(strongPass)) {
    alert("Password must be at least 8 characters long and include at least 1 Uppercase letter");
    console.log('poop')
    pass.value = ''
    return false
  } else {
    console.log('got x', x)
    document.getElementById('message').innerHTML += "IT'S A GOOD!";
    pass.value = ''
  }
}
//pass.addEventListener('input', isStrong)
submit.addEventListener('click', isStrong)