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">
<input name="" type="checkbox" id="showpass"><span>Show Password</span>
<input name="submit" type="button" id="submit" class="submit" value="Check">
</div>
<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>
Comments