Regular Expression Username Validators and a Random Username Generator
The source code for the Regular Expression Username 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 Username Validator. If you use either of the validators somewhere on the Net, please give us a dofollow backlink with link text: "Regular Expression Username Validator." If you use the random username generator somewhere on the Net, please give us a dofollow backlink with link text: "Random Username Generator". Thank you. Below, you'll see a grueling series of test Usernames we subjected our Regular Expression Username Validator to, followed by the results. First we will look at Usernames that validated, and our comments about the results. Then we will look at Usernames that did not validate, and our comments about why these were the correct results.
The Regular Expression Username 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 username 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 adding numbers to their input, or in place of bad characters. If the fixed username is acceptable, the user gets to accept it, and if not, the user gets to reject it.
The random username generator is simple—you input the number of characters you want in your username and it gives you a username of that length with randomly chosen uppercase or lowercase letters, or numbers, or _ characters.
JOEjoe uppercase is fine but a stronger username would have some of these as well: 0123456789_ so JOE_12_j88@ is much better
JOE_joe_Joe usernames with _ in them are fine too
_______ this is okay technically but is a terrible username because one cannot tell by looking at it how many underscores there are, and variety gives much more username strength
JJJJJJJJJJJ this is okay technically but is a terrible username because it's hard to count the letters, and variety gives much more username strength
qwerty123 this is too easy to guess
myusername this is also too easy to guess
asdfghjkl this is also too easy to guess since they are right in a row on the keyboard
THESE USERNAMES 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 Usernames to check what will or will not validate with the check() function. In the code, for testing we used: {alert("Username validated OK.");d.username.value='';d.username.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.
The code below also lets you test various Usernames 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.username.value='';d.username.focus();}else{alert("It's rejected—try again.");d.username.value='';d.username.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.username.value='';d.username.focus();}return false;}, and add an appropriate action in the form tag.
The code below also lets you generate various Usernames to check what kinds of Usernames you'll get with the random username 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.usernamesize.value='';d.username.value='';d.usernamesize.focus();}else{alert("It's rejected—try again.");
d.usernamesize.value='';d.username.value='';d.usernamesize.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.usernamesize.value='';d.username.value='';d.usernamesize.focus();}return false;}, and add an appropriate action in the form tag. The username 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_username. 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 usernames.) 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.username.value.search(ck_username)==-1) searches the form value just input for the regular expression pattern in the varible referenced in the (), which is ck_username. The d.username.value='' code means emptying the form value after bad input. The d.username.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 123456 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,"9"); 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 9, the replace function and regular expression together mean we wish to replace everyhing that is not one of these characters with a 9.
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()*63); to return a random number between 0 and 62. 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 username 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 username into the form's input field with the name username, so that when return true allows form submission, a PHP script can pick up the POSTed username.
Try the Regular Expression username 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 Username Validator</TITLE>
<meta name="description" content="Good, Tested, Regular Expression Username Validators and a Random Username Generator">
<meta name="keywords" content="Regular Expression Username Validator,Random Username Generator,javascript Random Username Generator,javascript Regular Expression Username Validator,javascript, dhtml, DHTML">
<script language=javascript>
function check(){
var ck_username = /^[A-Za-z0-9_]{6,12}$/;
d=document.form;
if (document.form.username.value.search(ck_username)==-1)
{alert("Please only enter 6 to 12 letters, numbers and underscore for username.");d.username.value='';d.username.focus();return false}else
{alert("username validated OK.");d.username.value='';d.username.focus();return false}}
function check_edit(){
z="123456";
d=document.form2;
p=d.username.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,"9");
d.username.value=p;
var r=confirm("Press OK to accept "+p+" as username or Cancel to reject it.");
if (r==true){alert("Accepted");d.username.value='';d.username.focus();}else
{alert("It's rejected—try again.");d.username.value='';d.username.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.usernamesize.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()*63);//return a random num between 0 and 62
a=a+z[n];}
d.username.value=a;
var r=confirm("Press OK to accept "+a+" as username or Cancel to reject it.");
if (r==true){alert("Accepted");
d.usernamesize.value='';d.username.value='';d.usernamesize.focus();}else
{alert("It's rejected—try again.");
d.usernamesize.value='';d.username.value='';d.usernamesize.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,
and underscore in your username.<br>
<INPUT maxLength="12" type="text" name="username" size="12">
<INPUT TYPE="SUBMIT" value="Submit Username">
<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,
and underscore in your username.<br>Your username will be edited is you goof.<br>
<INPUT maxLength="12" type="text" name="username" size="12">
<INPUT TYPE="SUBMIT" value="Submit Username">
<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 USERNAME GENERATOR 6 TO 12 CHARACTERS LONG<BR>Your username will be generated now.<br>
<INPUT maxLength="2" type="text" name="usernamesize" size="2"> How many characters?<br>
<INPUT TYPE="SUBMIT" value="Submit Username Length"> <INPUT TYPE="RESET" value="reset"><br>
<INPUT type="text" name="username" size="30"> NEW USERNAME<BR>
</form>
</BODY>
</HTML>