Wednesday, 8 October 2014

Live Username Availability Checker and Password Strength Indicator PHP and Jquery

SQL query to create registration table:

CREATE TABLE IF NOT EXISTS `registration` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`name` varchar(20) NOT NULL,
`password` varchar(20) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
 
 
 
 index.html
------------------------------------------------------------------------------- 
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="css/style.css" />

</head>
<body>
<div id="container">

<div id="top"> Live Username Availability Checker and Password Strength Indicator Using Ajax, jQuery- InfoTuts </div>

<div id="wrapper">
<div id="form">

<label>Choose Your Username</label>
<input type="text" autocomplete="off" name="user_name" id="user_id" >
<span  ></span> <br/><br/>
<label>Choose Your Password</label>
<input type="password" autocomplete="off" name="passwd" />
<span class=""></span>

</div>
</div>
</div>
<!-- javascript placed at bottom to make page load faster -->
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.password_strength.js"></script>
<script type="text/javascript">
$(function()
{
$('.user_name').keyup(function()
{
var checkname=$(this).val();
var availname=remove_whitespaces(checkname);
if(availname!=''){
$('.check').show();
$('.check').fadeIn(400).html('<img src="image/ajax-loading.gif" /> ');</p>
<p style="text-align: justify;">var String = 'username='+ availname;
$.ajax({
type: "POST",
url: "available.php",
data: String,
cache: false,
success: function(result){
var result=remove_whitespaces(result);
if(result==''){
$('.check').html('<img src="image/accept.png" /> This Username Is Avaliable');
$(".check").removeClass("red");
$('.check').addClass("green");
$(".user_name").removeClass("yellow");
$(".user_name").addClass("white");
}else{
$('.check').html('<img src="image/error.png" /> This Username Is Already Taken');
$(".check").removeClass("green");
$('.check').addClass("red")
$(".user_name").removeClass("white");
$(".user_name").addClass("yellow");
}
}
});
}else{
$('.check').html('');

}
});

$('.passwd').password_strength(); // to check password strength
});

function remove_whitespaces(str){
var str=str.replace(/^\s+|\s+$/,'');
return str;
}
</script>

</body>
</html>

 --------------------------------------------------------------------------------------------------------

available.php 
<?php
$mysql_db_hostname = "localhost";
$mysql_db_user = "root";
$mysql_db_password = "12345";
$mysql_db_database = "demo";

$con = mysql_connect($mysql_db_hostname, $mysql_db_user, $mysql_db_password) or die("Could not connect database");
mysql_select_db($mysql_db_database, $con) or die("Could not select database");

if(isset($_POST['username']) && !empty($_POST['username'])){
$username=strtolower(mysql_real_escape_string($_POST['username']));
$query="select * from registration where LOWER(name)='$username'";
$res=mysql_query($query);
$count=mysql_num_rows($res);
$HTML='';
if($count > 0){
$HTML='user exists';
}else{
$HTML='';
}
echo $HTML;
}
?>

------------------------------------------------------

 
 jquery.password_strength.js
 
 
/*
 * Password Strength (0.1.2)
 * by Sagie Maoz (n0nick.net)
 * n0nick@php.net
 *
 * This plugin will check the value of a password field and evaluate the
 * strength of the typed password. This is done by checking for
 * the diversity of character types: numbers, lowercase and uppercase
 * letters and special characters.
 *
 * Copyright (c) 2010 Sagie Maoz <n0nick@php.net>
 * Licensed under the GPL license, see http://www.gnu.org/licenses/gpl-3.0.html 
 *
 *
 * NOTE: This script requires jQuery to work.  Download jQuery at www.jquery.com
 *
 */

(function($){

var passwordStrength = new function()
{
 this.countRegexp = function(val, rex)
 {
  var match = val.match(rex);
  return match ? match.length : 0;
 };
 
 this.getStrength = function(val, minLength)
 { 
  var len = val.length;
  
  // too short =(
  if (len < minLength)
  {
   return 0;
  }
  
  var nums = this.countRegexp(val, /\d/g),
   lowers = this.countRegexp(val, /[a-z]/g),
   uppers = this.countRegexp(val, /[A-Z]/g),
   specials = len - nums - lowers - uppers;
  
  // just one type of characters =(
  if (nums == len || lowers == len || uppers == len || specials == len)
  {
   return 1;
  }
  
  var strength = 0;
  if (nums) { strength+= 2; }
  if (lowers) { strength+= uppers? 4 : 3; }
  if (uppers) { strength+= lowers? 4 : 3; }
  if (specials) { strength+= 5; }
  if (len > 10) { strength+= 1; }
  
  return strength;
 };
 
 this.getStrengthLevel = function(val, minLength)
 {
  var strength = this.getStrength(val, minLength);

  val = 1;
  if (strength <= 0) {
   val = 1;
  } else if (strength > 0 && strength <= 4) {
   val = 2;
  } else if (strength > 4 && strength <= 8) {
   val = 3;
  } else if (strength > 8 && strength <= 12) {
   val = 4;
  } else if (strength > 12) {
   val = 5;
  }

  return val;
 };
};

$.fn.password_strength = function(options)
{
 var settings = $.extend({
  'container' : null,
  'bar': null, // thanks codemonkeyking
  'minLength' : 6,
  'texts' : {
   1 : 'Too weak',
   2 : 'Weak password',
   3 : 'Normal strength',
   4 : 'Strong password',
   5 : 'Very strong password'
  },
  'onCheck': null
 }, options);
 
 return this.each(function()
 {
  var container = null, $bar = null;
  if (settings.container)
  {
   container = $(settings.container);
  }
  else
  {
   container = $('<span/>').attr('class', 'password_strength');
   $(this).after(container);
  }

  if (settings.bar)
  {
   $bar = $(settings.bar);
  }
  
  $(this).bind('keyup.password_strength', function()
  {
   var val = $(this).val(),
     level = passwordStrength.getStrengthLevel(val, settings.minLength);

   if (val.length > 0)
   {
    var _class = 'password_strength_' + level,
      _barClass = 'password_bar_' + level;
    
    if (!container.hasClass(_class) && level in settings.texts)
    {
     container.text(settings.texts[level]).attr('class', 'password_strength ' + _class);
    }
    if ($bar && !$bar.hasClass(_barClass))
    {
     $bar.attr('class', 'password_bar ' + _barClass);
    }
   }
   else
   {
    container.text('').attr('class', 'password_strength');
    if ($bar) {
     $bar.attr('class', 'password_bar');
    }
   }
   if (settings.onCheck) {
    settings.onCheck.call(this, level);
   }
  });

  if ($(this).val() != '') { // thanks Jason Judge
    $(this).trigger('keyup.password_strength');
  }
 });
};

})(jQuery);

 

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)