Password validator

      No Comments on Password validator

Password validator in JavaScript. This validator checks each input character as it is typed to verify the required conditions. The validator runs function onkeyup.

See the Pen by scanfcode (@scanfcode) on CodePen.

Password validator

CSS:

body
{
  padding:40px;
  background-color: #0033cc;
}
.valid_in
{
  border:solid 1px yellow;
  border-width:0px 0px 3px 0px;
  background-color:transparent;
  padding:10px;
  width:350px;
  color:#fff;
  font-size:24px;
}
.valid-option ul
{
  list-style-type:none;
  font-size:18px;
  color:#e6e6e6;
  letter-spacing:2px;
}

HTML:

<form>
  <input type="text" class="valid_in" id="in11"
         onkeyup="validate_text()"/>
  <div class="valid-option">
    <ul>
      <li>a lowercase letter</li>
      <li>a digit should be present</li>
      <li>minimum 6 characters in length</li>
    </ul>
  </div>
 </form>

JS:

function validate_text()
{
  var a=document.getElementById('in11').value.slice(-1);
  var x=document.getElementsByTagName("li");
 if(a.match(/[a-z]/)) 
  {
    x[0].style.textDecoration = "line-through";
  }
 if(a.match(/[0-9]/))
   {
    x[1].style.textDecoration = "line-through"; 
   }

   var len=document.getElementById('in11').value;
 
  if(len.length>=6)
    {
      x[2].style.textDecoration = "line-through";
    }
}

Let us see what happens here

var a=document.getElementById('in11').value.slice(-1);

This statement is used to get the input character as it is entered. If we do not use slice(-1)then this statement will return complete string set that has been entered.

  var x=document.getElementsByTagName("li");

This statement is used to store each li element.

 if(a.match(/[a-z]/)) 
  {
    x[0].style.textDecoration = "line-through";
  }

if(a.match(/[a-z]/)) statement matches the input character in a to a reg-Expression /[a-z]/ .If it returns true, first li element is selected using x[0].
Thus this matches for lower alphabets.match() function is used to match the patter to the character.

 if(a.match(/[0-9]/))

reg-Expression validation for numeric characters.

 if(len.length>=6)

This statement verifies the length using the length function.

Leave a Reply

Your email address will not be published. Required fields are marked *