Wednesday, 9 July 2014

JavaScript: Password Validation using regular expressions and HTML5

<script type="text/javascript"> 
function checkForm(form) 

if(form.username.value == "") 

alert("Error: Username cannot be blank!"); 
form.username.focus(); 
return 
false; 

re = /^\w+$/; 
if(!re.test(form.username.value)) 

alert("Error: Username must contain only letters, numbers and underscores!"); form.username.focus(); 
return false; 

if(form.pwd1.value != "" && form.pwd1.value == form.pwd2.value) 

if(form.pwd1.value.length < 6) 

alert("Error: Password must contain at least six characters!"); form.pwd1.focus(); 
return false; 

if(form.pwd1.value == form.username.value) 

alert("Error: Password must be different from Username!"); 
form.pwd1.focus(); 
return false; 

re = /[0-9]/; if(!re.test(form.pwd1.value)) 

alert("Error: password must contain at least one number (0-9)!"); form.pwd1.focus(); return false; 

re = /[a-z]/; 
if(!re.test(form.pwd1.value)) 

alert("Error: password must contain at least one lowercase letter (a-z)!"); form.pwd1.focus(); 
return false; 

re = /[A-Z]/; 
if(!re.test(form.pwd1.value)) 

alert("Error: password must contain at least one uppercase letter (A-Z)!"); form.pwd1.focus(); 
return false; 


else 

alert("Error: Please check that you've entered and confirmed your password!"); form.pwd1.focus(); 
return false; 

alert("You entered a valid password: " + form.pwd1.value); 
return true; 

</script> 
<form ... onsubmit="return checkForm(this);"> 
<p>Username: <input type="text" name="username"></p> 
<p>Password: <input type="password" name="pwd1"></p> 
<p>Confirm Password: <input type="password" name="pwd2"></p> 
<p><input type="submit"></p> 
</form>

Sample HTML and JavaScript code

<script type="text/javascript"> 
 function checkPassword(str) 

var re = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}$/; 
return re.test(str); 

function checkForm(form) 

if(form.username.value == "") 

alert("Error: Username cannot be blank!"); 
form.username.focus(); 
return false; 

re = /^\w+$/; if(!re.test(form.username.value)) 

alert("Error: Username must contain only letters, numbers and underscores!"); form.username.focus(); 
return false; 

if(form.pwd1.value != "" && form.pwd1.value == form.pwd2.value) 

if(!checkPassword(form.pwd1.value)

alert("The password you have entered is not valid!"); 
form.pwd1.focus(); return false; 


else 

alert("Error: Please check that you've entered and confirmed your password!"); form.pwd1.focus(); 
return false; 

return true; 

</script> 
<form method="POST" action="..." onsubmit="return checkForm(this);"> 
<p>Username: <input type="text" name="username"></p> 
<p>Password: <input type="password" name="pwd1"></p> 
<p>Confirm Password: <input type="password" name="pwd2"></p> 
<p><input type="submit"></p> 
</form>