Regular Expression Password Validators and a Random Password Generator
The source code for the Regular Expression Password Validator is at the bottom of the page. A discussion of what we did precedes the code. Just before that you'll find a link giving you the opportunity to try out the Regular Expression Password Validator. If you use either of the validators somewhere on the Net, please give us a dofollow backlink with link text: "Regular Expression Password Validator." If you use the random password generator somewhere on the Net, please give us a dofollow backlink with link text: "Random Password Generator". Thank you. Below, you'll see a grueling series of test Passwords we subjected our Regular Expression Password Validator to, followed by the results. First we will look at Passwords that validated, and our comments about the results. Then we will look at Passwords that did not validate, and our comments about why these were the correct results.
The Regular Expression Password Validator has 3 parts. If you use our code, you will want to choose which of the 2 validators you like best—or whether you like the random password generator better. The first validator tells them what characters are okay, and stops them after 12 characters are entered. Then it sends the input to a validator function and if any illegal characters were entered, it gives them an alert and says to try again by erasing their entry and keeping the focus in the input box. It does not fix the illegal input.
The second validator looks for bad input and fixes either too few characters or illegal characters by use of @ signs. If the fixed password is acceptable, the user gets to accept it, and if not, the user gets to reject it.
The random password generator is simple—you input the number of characters you want in your password and it gives you a password of that length with randomly chosen uppercase or lowercase letters, or numbers, or !@#$%^&*()_ characters.
JOEjoe uppercase is fine but a stronger password would have some of these as well: !@#$%^&*()_ so joe12&%*@ is much better
JOE_joe_Joe passwords with _ in them are fine too
$9876! passwords with $ in them are fine too but adding _ert() to make it $9876!_ert() is stronger
_______ this is okay technically but is a terrible password because one cannot tell by looking at it how many underscores there are, and variety gives much more password strength
JJJJJJJJJJJ this is okay technically but is a terrible password because it's hard to count the letters, and variety gives much more password strength
qwerty123 this is too easy to guess
mypassword this is also too easy to guess
!@#$%^&*() this is also too easy to guess since they are right in a row on the keyboard
THESE PASSWORDS WILL NOT VALIDATE BECAUSE:
JOE_j too short
JOE.Joe dots are not allowed
JOE joe spaces are not allowed
joe#joe even if the space is at the end of the input, spaces are not allowed
"JOE@joe" quotes are not allowed
JOE-joe hyphens are not allowed
<>?,./:;"'{[}]+=- none of these characters are allowed
The code below lets you test various Passwords to check what will or will not validate with the check() function. In the code, for testing we used: {alert("Password validated OK.");d.password.value='';d.password.focus();return false}} but when you actually use the code, change this alert code to simply {return true}}, and add an appropriate action in the form tag. You might want to have type="text" be changed to type="password" in the input box, as this will prevent onlookers from seeing what the user typed.
The code below also lets you test various Passwords to check what will or will not validate with the check_edit() function. Note that we did not allow more than 12 characters, so the code—if (l>12) {p=p.slice(0,12)}—where we slice off more than 12 characters is redundant, since the form does this already with maxLength="12" in the input box. In the code, for testing we used: if (r==true){alert("Accepted");d.password.value='';d.password.focus();}else{alert("It's rejected—try again.");d.password.value='';d.password.focus();}return false;} but when you actually use the code, change this code to simply if (r==true){alert("Accepted");return true;}else{alert("It's rejected—try again.");d.password.value='';d.password.focus();}return false;}, and add an appropriate action in the form tag. You might want to have type="text" be changed to type="password" in the input box, as this will prevent onlookers from seeing what the user typed. Of course, since the confirming dialog will actually display the password when asking if it's okay, you might not want to bother!
The code below also lets you generate various Passwords to check what kinds of passwords you'll get with the random password generator in the check_number() function. Note that we did not allow more than 12 characters or less than 6 and if your input text is not a number, the JavaScript isNaN() function will detect it and you'll get a 6 in its place. In the code, for testing we used: if (r==true){alert ("Accepted");
d.passwordsize.value='';d.password.value='';d.passwordsize.focus();}else{alert("It's rejected—try again.");
d.passwordsize.value='';d.password.value='';d.passwordsize.focus();}return false;} but when you actually use the code, change this code to simply if (r==true){alert("Accepted");return true;}else{alert("It's rejected—try again.");d.passwordsize.value='';d.password.value='';d.passwordsize.focus();}return false;}, and add an appropriate action in the form tag. The password is in the variable a.
Now let's look at the regular expressions we used:
The check() function: The /^[A-Za-z0-9!@#$%^&*()_]{6,12}$/; is the whole regular expression. This gets put into the variable ck_password. The / at the start and end match a word boundary. The ^ says to match right after the start of the string (inputted URL). The $ at the end says to match right before the end of the string (inputted URL). The []s are a "character class", also called "character set", with which you can tell the regex engine to match only one out of several characters. The {} brackets mean {min,max}, i.e., the least to the most letter characters that will match the input string. The {6,12} mean if the input string has 0, 1, 2, 3, 4, 5 or more than 12 characters, the match will fail. (Many sites require a minimum of 6 characters for passwords.) In the bracket-bounded character class, A-Z is a range meaning all uppercase letters. And a-z means all lowercase letters. And 0-9 means all digits. \d would mean the same but is harder to read. The expression d=document.form is putting the document's 1st form in a convenient variable. The code if (document.form.password.value.search(ck_password)==-1) searches the form value just input for the regular expression pattern in the varible referenced in the (), which is ck_password. The d.password.value='' code means emptying the form value after bad input. The d.password.focus() code means keeping the cursor in the input box for a do-over. The return false code means don't submit the input string, just like a return true would mean the string validated so submit it. This script is a test script, as mentioned above, so we didn't want submitting regardless of validation, since then it would reload the page, since that is how the browser interprets the action=" " in the form tag.
The check_edit() function: First we stick 6 @ signs in the z variable. Then we check the length of the input string and if it is under 6, we slice off a chunk of the z string and add it to their input, giving us the required 6 characters. If they inputted more than 12 characters, we slice it off until it is 12 long—our maximum. Our p=p.replace(/[^A-Za-z0-9!@#$%^&*()_]/g,"@"); code is very cool. It uses an often overlooked regular expression operator: the ^. If it is outside a bracket-bounded character class, it means to match right after the start of the string (inputted URL). If it has \ before it, it is a literal, so it refers to the ^ character. But if it is at the very beginning inside a character class, right after the [, it means negation. So the regular expression will match anything but these characters. Since we put it in a replace function in which we are replacing with a @ sign, the replace function and regular expression together mean we wish to replace everyhing that is not one of these characters with a @ sign.
The check_number() function: First we create a z array with all the acceptable characters in it. Then we check the input number and if it's under 6 or not a number—isNaN()—then we change it to 6. If it's over 12, we change it to 12. Next we use n=Math.floor(Math.random()*72); to return a random number between 0 and 71. The Math.random function gets numbers between 0 and 1. The Math.floor function rounds off to the next lowest integer. The a=a+z[n] expression adds z[n] to the currect value of a. This means we are looping through the for loop the same number of times that the input number of password characters represents. Each loop we add another character, since z[n] gets us a random character from the z array each time. We stick the password into the form's input field with the name password, so that when return true allows form submission, a PHP script can pick up the POSTed password.
Try the Regular Expression Password Validator.
Good info site for learning about Regular Expressions.
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<TITLE>Regular Expression Password Validator</TITLE>
<meta name="description" content="Good, Tested, Regular Expression Password Validators and a Random Password Generator">
<meta name="keywords" content="Regular Expression Password Validator,Random Password Generator,javascript Random Password Generator,javascript Regular Expression Password Validator,javascript, dhtml, DHTML">
<script language=javascript>
function check(){
var ck_password = /^[A-Za-z0-9!@#$%^&*()_]{6,12}$/;
d=document.form;
if (document.form.password.value.search(ck_password)==-1)
{alert("Please only enter 6 to 12 letters, numbers and these for password: !@#$%^&*()_");d.password.value='';d.password.focus();return false}else
{alert("Password validated OK.");d.password.value='';d.password.focus();return false}}
function check_edit(){
z="@@@@@@";
d=document.form2;
p=d.password.value;
l=p.length;
if (l<6) {p=p+z.slice(0,6-l)}
if (l>12) {p=p.slice(0,12)}
p=p.replace(/[^A-Za-z0-9!@#$%^&*()_]/g,"@");
d.password.value=p;
var r=confirm("Press OK to accept "+p+" as password or Cancel to reject it.");
if (r==true){alert("Accepted");d.password.value='';d.password.focus();}else
{alert("It's rejected—try again.");d.password.value='';d.password.focus();}
return false;}
function check_number(){
var z=new Array
('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
'0','1','2','3','4','5','6','7','8','9','!','@','#','$','%','^','&','*','(',')','_',
'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');
d=document.form3;
p=d.passwordsize.value;
if (p<6||isNaN(p)){p=6}
if (p>12){p=12}
var a="";var n=0;var i=0;
for (i=0;i<p;i++){
n=Math.floor(Math.random()*72);//return a random num between 0 and 71
a=a+z[n];}
d.password.value=a;
var r=confirm("Press OK to accept "+a+" as password or Cancel to reject it.");
if (r==true){alert("Accepted");
d.passwordsize.value='';d.password.value='';d.passwordsize.focus();}else
{alert("It's rejected—try again.");
d.passwordsize.value='';d.password.value='';d.passwordsize.focus();}
return false;}
</script>
</HEAD>
<body>
<BR><BR><BR><BR>
<form style='margin-left:340px' name='form' action=" " method="POST" onsubmit="return check()">
Uppercase letters are okay. Use letters, numbers,<br>and these in your password: !@#$%^&*()_<br>
<INPUT maxLength="12" type="text" name="password" size="12">
<INPUT TYPE="SUBMIT" value="Submit Password">
<INPUT TYPE="RESET" value="reset">
</form>
<BR><BR><BR><BR>
<form style='margin-left:340px' name='form2' action=" " method="POST" onsubmit="return check_edit()">
Uppercase letters are okay. Use letters, numbers,<br>and these in your password: !@#$%^&*()_<br>Your password will be edited is you goof.<br>
<INPUT maxLength="12" type="text" name="password" size="12">
<INPUT TYPE="SUBMIT" value="Submit Password">
<INPUT TYPE="RESET" value="reset">
</form>
<BR><BR><BR><BR>
<form style='margin-left:340px' name='form3' action=" " method="POST" onsubmit="return check_number()">
RANDOM PASSWORD GENERATOR 6 TO 12 CHARACTERS LONG<BR>Your password will be generated now.<br>
<INPUT maxLength="2" type="text" name="passwordsize" size="2"> How many characters?<br>
<INPUT TYPE="SUBMIT" value="Submit Password Length"> <INPUT TYPE="RESET" value="reset"><br>
<INPUT type="text" name="password" size="30"> NEW PASSWORD<BR>
</form>
</BODY>
</HTML>