If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
Password Checker
jQuery में किसी user password की strength जानने के लिए आप according custom conditions लगा सकते हैं जैसे , password में special characters होने चाहिए , Upper case या lower case etc.. ये सब conditions apply करके आप easily Password Checker बना सकते हैं।
सबसे पहले हम एक label और input लिखेंगे जिससे हम value enter कर सकें -
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<div id="password-strength" class="password-strength"></div>
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;
}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 कर सकते हैं।
Loading ...