<!Doctype html> <html> <body> <head> <style> #frmCheckPassword {border-top:#F0F0F0 2px solid; background:#808080;padding:10px; } .demoInputBox{ padding:7px; border:#F0F0F0 1px solid; border-radius:4px; } #password-strength-status { padding: 5px 10px;color: #FFFFFF; border-radius:4px;margin-top:5px; } .medium-password{ background-color: #b7d60a;border:#BBB418 1px solid; } .weak-password{ background-color: #ce1d14;border:#AA4502 1px solid; } .strong-password{ background-color: #12CC1A;border:#0FA015 1px solid; } </style> </head> <div name="frmCheckPassword" id="frmCheckPassword"> <label>Password:</label> <input type="password" name="password" id="password" class="demoInputBox" onKeyUp="checkPasswordStrength();" /><div id="password-strength-status"></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> function checkPasswordStrength() { var number = /([0-9])/; var alphabets = /([a-zA-Z])/; var special_characters = /([~,!,@,#,$,%,^,&,*,-,_,+,=,?,>,<])/; if($('#password').val().length<6) { $('#password-strength-status').removeClass(); $('#password-strength-status').addClass('weak-password'); $('#password-strength-status').html("Weak (should be atleast 6 characters.)"); } else { if($('#password').val().match(number) && $('#password').val().match(alphabets) && $('#password').val().match(special_characters)) { $('#password-strength-status').removeClass(); $('#password-strength-status').addClass('strong-password'); $('#password-strength-status').html("Strong"); } else { $('#password-strength-status').removeClass(); $('#password-strength-status').addClass('medium-password'); $('#password-strength-status').html("Medium (should include alphabets, numbers and special characters.)"); }} } </script> </body> </html>