Validate Password Strength Using Jquery Web-development (jquery) Validate Password Strength Using Jquery
<style type="text/css"> #register { margin-left:100px; } #register label{ margin-right:5px; } #register input { padding:5px 7px; border:1px solid #d5d9da; box-shadow: 0 0 5px #e8e9eb inset; width:250px; font-size:1em; outline:0; } #result{ margin-left:5px; } #register .short{ color:#FF0000; } #register .weak{ color:#E66C2C; } #register .good{ color:#2D98F3; } #register .strong{ color:#006400; } </style> <script type="text/javascript" src="jquery.js"></script> <script> $(document).ready(function() { $('#password').keyup(function(){ $('#result').html(checkStrength($('#password').val())) }) function checkStrength(password){ //initial strength var strength = 0 //if the password length is less than 6, return message. if (password.length < 6) { $('#result').removeClass() $('#result').addClass('short') return 'Too short' } //length is ok, lets continue. //if length is 8 characters or more, increase strength value if (password.length > 7) strength += 1 //if password contains both lower and uppercase characters, increase strength value if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1 //if it has numbers and characters, increase strength value if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) strength += 1 //if it has one special character, increase strength value if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1 //if it has two special characters, increase strength value if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,",%,&,@,#,$,^,*,?,_,~])/)) strength += 1 //now we have calculated strength value, we can return messages //if value is less than 2 if (strength < 2 ) { $('#result').removeClass() $('#result').addClass('weak') return 'Weak' } else if (strength == 2 ) { $('#result').removeClass() $('#result').addClass('good') return 'Good' } else { $('#result').removeClass() $('#result').addClass('strong') return 'Strong' } } }); </script> <form> <label for="password">Password:</label> <input name="password" type="password"/> <span></span> </form>
0 Response to "Validate Password Strength Using Jquery"
Posting Komentar