Share your knowledge with other learners . . . Write As Guest

Password Strength Checker In jQuery In Hindi

Top Blogs

Loading ...


Image could not load

Password Checker

Check Password Strength In Jquery

jQuery में किसी user password की strength जानने के लिए आप according custom conditions लगा सकते हैं जैसे , password में special characters होने चाहिए , Upper case या lower case etc.. ये सब conditions apply करके आप easily Password Checker बना सकते हैं।

HTML

सबसे पहले हम एक label और input लिखेंगे जिससे हम value enter कर सकें -

<label for="password">Password:</label> <input type="password" id="password" name="password"> <div id="password-strength" class="password-strength"></div>

CSS

input / result को अच्छा दिखने के लिए कुछ css भी apply कर देते हैं -

.password-strength { font-size: 1rem; margin-top: 0.5rem; padding: 0.5rem; text-align: center; border-radius: 0.25rem; } .password-strength.weak { background-color: #f8d7da; color: #721c24; } .password-strength.medium { background-color: #fff3cd; color: #856404; } .password-strength.strong { background-color: #d4edda; color: #155724; }

jQuery

Finally , अब jQuery का code लिखेंगे जहाँ हम check करेंगे कि password कितना strong है -

$(document).ready(function() { $('#password').on('keyup', function() { var password = $(this).val(); var strength = 0; if (password.match(/[a-z]+/)) { strength += 1; } if (password.match(/[A-Z]+/)) { strength += 1; } if (password.match(/[0-9]+/)) { strength += 1; } if (password.match(/[$@#&!]+/)) { strength += 1; } if (password.length >= 8) { strength += 1; } switch(strength) { case 0: case 1: $('#password-strength').html('Weak').removeClass().addClass('password-strength weak'); break; case 2: case 3: $('#password-strength').html('Medium').removeClass().addClass('password-strength medium'); break; case 4: case 5: $('#password-strength').html('Strong').removeClass().addClass('password-strength strong'); break; } }); });

That's it , jQuery में password strength check बनकर ready हो गया है , आप कोई html file बनाकर ऊपर दिया गया code रखकर check कर सकते हैं।

Give Feedback

like-image 0.

Recent Blogs

Loading ...

Rahul Kumar

Rahul Kumar

Hi ! My name is Rahul Kumar Rajput. I'm a back end web developer and founder of learnhindituts.com. I live in Uttar Pradesh (UP), India and I love to talk about programming as well as writing technical tutorials and tips that can help to others.

Get connected with me. :) LinkedIn Twitter Instagram Facebook