jQuery Password Validation | Lessoncup Programming Blog

Monday, 6 January 2014

jQuery Password Validation

Hi, today i am going to tell about how to validate the password with using few regular expressions i just develop this small password validation with few features like should enter one number and should enter one capital character and re enter password along with show password option, this is very common and regular using script in every small to big application. let's see how to do this a small app


HTML

in html take the input boxes and put the type to password  take one button and one checkbox to make the password boxes to show and hide
<div class="lessoncup">

<h1>Password Validation</h1>

<em></em>

<input name="pass" type="password" id="pass" class="pass" placeholder="Password"> 
<span>0 - 8</span>


<input name="repass" type="password" id="repass" class="pass" placeholder="Re enter Password"><br/>

<input name="" type="checkbox" id="showpass"><span>Show Password</span><br>

<input name="submit" type="button" id="submit" class="submit" value="Check">

</div>

JAVASCRIPT

now write the click function to submit button as a selector, here we are going to validating the password box with few conditions , in the first condition we are checking whether the password box is empty or not, in the second condition  we are checking is the password box length is less than 5 characters we display error message, in next condition we are checking is the password box length is more than 8 characters we display error message,

in next condition we are checking is the password box is having at least one digit number if it is not having we display a error message, in next condition we are checking is the password box having at least one capital letter if it is not we display error message, in the last condition we are checking is the password box text is matching to re password text if the fields or not match we display a error message.
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){
 
 
 $('#submit').click(function(){
  
  var passwordRuleNum = /((?=.*\d))/gm; // rule for at least one number
  
 var passwordRuleCap = /((?=.*[A-Z]))/gm; // rule for at least one capital letter
  
  var pass = $('#pass').val();
  
  var repass = $('#repass').val();
  
  if(pass==""){
   
   $('em').text("enter your password");
   
  }else if(pass.length<5){
   
   $('em').text("password should have atleast five charectors");
   
  }else if(pass.length>8){
   
   $('em').text("password should not above eight charectors");
   
  }else if(!passwordRuleNum.test(pass)) {
   
   $('em').text("password must have atleast one digit");
   
  }else if(!passwordRuleCap.test(pass)) {
   
   $('em').text("password must have atleast one Capital Letter");
   
  }else if(pass!=repass) {
   
   $('em').text("your password is not matching");
   
  }else{
   
   $('em').text("");
   
  }
  
 });
 
 
 
 $('#showpass').click(function(){
  
  $(this).prop("checked",this.checked);
  
  if($(this).is(":checked")){
   
   $('#pass').attr('type','text');
   
   $('#repass').attr('type','text');
   
  }else{
   
   $('#pass').attr('type','password');
   $('#repass').attr('type','password');
   
  }
  
 });

  
});

</script>

Live Demo   Download Script

2 comments :

  1. bravo!! jaimerais bien apprendre a créer mon site web

    ReplyDelete
  2. i need email vailidater if email is registred then chk auto matic

    ReplyDelete

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons