<!DOCTYPE html> <html> <head> <title></title> <style> #password_error{ color:red; } </style> </head> <body> <p> <label for="password">Password</label> <input type="text" id="password"> <span id="password_error"></span> </p> <p> <button type="submit" id="register_button">Register</button> </p> </body> </html> <script type="text/javascript"> document.getElementById("register_button").addEventListener("click",function(){ let password=document.getElementById("password"); let password_error=document.getElementById("password_error"); let error=false; if(check_password(/[a-z]{1,8}/ig, password.value)){ error=false; } else{ error=true; password_error.innerHTML="Password must contain alphabet."; return false; } if(check_password(/[0-9]{1,8}/ig, password.value)){ error=false; } else{ error=true; password_error.innerHTML="Password must contain a digit."; return false; } if(check_password(/[@#$%^&*()]{1,8}/ig, password.value)){ error=false; } else{ error=true; password_error.innerHTML="Password must contain special character one of them @#$%^&*()"; return false; } if(password.value.length>=8 && password.value.length<=20){ error=false; } else{ error=true; password_error.innerHTML="Password length must between 8 to 20 character"; return false; } if(!error){ alert("valid"); } else{ } }); function check_password(pattern, data){ if(pattern.test(data)){ return true; password_error.innerHTML=""; } else{ return false; } } </script>