JSFiddle - React, Tailwind, and code Playground
HTML
Using split up regex: <input type="text" id="password1" placeholder="Enter password" />
<span id="output1"></span>
<br>
Using one big regex: <input type="text" id="password2" placeholder="Enter password" />
<span id="output2"></span>
JavaScript
function isValid1(pass) {
return pass.length >= 8 && // at least 8 characters
/\d/.test(pass) && // contains a digit
/[A-Za-z]/.test(pass); // contains a letter
}
function isValid2(pass) {
return /^(?=.*[A-Za-z])(?=.*\d).{8,}$/.test(pass);
}
var field1 = document.getElementById("password"),
output1 = document.getElementById("output"),
field2 = document.getElementById("password"),
output2 = document.getElementById("output");
field1.onkeyup = function() {
output1.innerHTML = isValid(field1.value) ? "Valid" : "Not Valid";
}
field2.onkeyup = function() {
output2.innerHTML = isValid(field2.value) ? "Valid" : "Not Valid";
}