Tuesday, February 23, 2010

Javascript For Email Validation (Javascript Untuk Validasi Email)








When validating an e-mail address, you are looking for the typical format found in such addresses. There may be some domain names that are more than three characters, but it isn't typical. Also, just because the user types what looks like a valid e-mail address, that does not mean that it is; for example, the e-mail address santa@northpole.org uses a valid syntax, but that fact does not prove that santa is a real user.
E-mail addresses usually have the following format:


  • An @ sign between the username and address (lequig@aol.com)


  • At least one dot between the address and domain name ( .com, .mil, .edu, .se)


  • At least six characters (a@b.se)[3]
    [3] As of this writing, domain names have at least two characters.
Examples of valid e-mail addresses:
username@mailserver.com
username@mailserver.info
username@mailserver.org.se
username.moretext@mailserver.mil
username@mailserver.co.uk
user-name.moretext.sometext@mailserver.se
To break down the regular expression
/^(([\-\w]+)\.?)+@(([\-\w]+)\.?)+\.[a-zA-Z]{2,4}$/;
use the following steps:
Step 1:
^
Go to the beginning of the line.
Step 2:
([\-\w]+)\.?
The user name consists of one or more dashes or word characters grouped by parentheses, followed by one (or not one) literal period. Because the dot is outside the parentheses there will be either one or zero dots for the list of word characters, not two or three dots in a row.
Step 3:
(([\-\w]+)\.?)+
The user name may consist of more than one set of word characters separated by a single dots, as in Joe.Shmoe.somebody.
Step 4:
@
A literal @ symbol is required in the e-mail address.
Step 5:
([\-\w]+)\.?)+
The mail server's name is like the user's name, a group of word characters separated by a dot. Same as step 3.
Step 6:
[a-zA-Z]{2,4}
The domain name follows the mail server's name. A single dot separates the server from the domain. The domain name consists of between two and four alphabetic characters; e.g., savageman@imefdm.usmc.mil or patricia.person@sweden.sun.com.
Step 7:
$
The end of the line anchor assures that no extra characters can be added onto the end of the e-mail address.




<body>
<h2> Checking for Valid Email Address </h2>
<h2><?php echo "$user_email"; ?></h2>
<form name="formtest" action="#" method="post" onSubmit="return ok_Email(this);">
<p>
Please enter your email address: <BR>
<input type="text" size=40 name="user_email">
</p>
<p>
<input type=submit value="Send">
</p>
</form>
</body></html>


[Download Sript]

EXPLANATION


  1. A function called ok_Email is defined. It takes one parameter, a reference to the form started on line 6.


  2. The regular expression is assigned the variable regex. The regular expression reads: Start at the beginning of the string (^), look for one or more alphanumeric characters and/or a dash followed by a literal dot (or not one). The literal period is outside the parentheses, meaning that in each group of word characters, there will be only one (or not one) period; e.g., abc.xyz. The entire expression is in parentheses followed by a + sign. This means that the pattern can be repeated one or more times; e.g., abc.xyz.yaddy.yady.yady. Next comes a literal @ symbol, required in all e-mail addresses. The mail server name comes right after the @ sign. Like the user name, it is represented by one or more alphanumeric characters or a dash, followed by a literal dot (\.). Now we have Joe.Blow@aol or DanSav@stamford, etc. This pattern, like the first pattern, can be repeated one or more times. The domain name part of the address comes next; a literal dot, and at least two but not more than four alphabetic characters, [a-zA-Z]{2,4}; e.g., JoeBlow@Chico.com, danny@Stamford.edu, .se, .uk, etc. There are other varieties that could also be considered, such as john@localhost, but for most e-mail addresses, the regular expression used in this example should suffice.


  3. The regular expression test() method takes the value of the user input, user_email.value, and returns true if the pattern in the regular expression matched the user's input.


  4. The e-mail address entered is tested to be valid. A true value is returned and the form will be submitted to the server. A valid e-mail address does not mean that if mail is sent to that address it will necessarily be delivered; e.g., santa@northpole.org is syntactically valid, but there is no guarantee that santa is a real user (unless you still believe!).


  5. If an invalid e-mail address was entered, the alert box will appear with this message. The ok_Email() function will return false, and the form will not be submitted.


  6. The form named formtest starts here.


  7. This is the URL of the CGI script that will be called on the server side when the form is submitted.


  8. The onSubmit event handler is triggered when the user presses the submit button. The value assigned to the event is a function called ok_Email that will return true if the e-mail address is valid and false, if not. The form will be sent to the server only if the return value is true.

No comments:

Post a Comment