JavaScripts :: Detectors :: E-mail validation
This free JavaScript will validate an email address entered into a form. The examples below will work in any type of file. This script will work in any browser on any platform, even in IE 2.0 on a Macintosh! This script is in use on literally thousands of web sites using our Perl scripts. The check_email function will validate an email address entered by a user in real time and return a false or negative value if the email address is not in a valid format. Copy and paste this function into your document, then follow the instructions below.
<script>
<!--
// Email Validation. Written by PerlScriptsJavaScripts.com
function check_email(e) {
ok = "1234567890qwertyuiop[]asdfghjklzxcvbnm.@-_QWERTYUIOPASDFGHJKLZXCVBNM";
for(i=0; i < e.length ;i++){
if(ok.indexOf(e.charAt(i))<0){
return (false);
}
}
if (document.images) {
re = /(@.*@)|(\.\.)|(^\.)|(^@)|(@$)|(\.$)|(@\.)/;
re_two = /^.+\@(\[?)[a-zA-Z0-9\-\.]+\.([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
if (!e.match(re) && e.match(re_two)) {
return (-1);
}
}
}
// -->
</script>
Note the 4 in the above regular expression. This used to be 3 before the new domain suffixes were released (.info, .name). However, now that 4 characters are allowed in the suffix, a user could enter name@server.conm and the error would not be detected. Next, you need your form validation script.
<script>
<!--
function check_form(f) { // f is the form (passed using the this keyword)
if(f.name.value.length < 1){
alert("You entered less than one character in the name field.");
f.name.focus(); // put the prompt in the name field
// if the browser is Netscape 6 or IE
if(document.all || document.getElementByID){
// change the color of text field
f.name.style.background = "yellow";
}
// make sure the form is not submitted
return false;
}
// check the first email address ( the exclamation means "not" )
if(!check_email(f.email.value)){
alert("Invalid email detected.");
f.email.focus();
// if the browser is Netscape 6 or IE
if(document.all || document.getElementByID){
// change the color of text field
f.email.style.background = "yellow";
}
// make sure the form is not submitted
return false;
}
// check the second email address
if(!check_email(f.another_email.value)){
alert("Invalid email detected.");
f.another_email.focus();
if(document.all || document.getElementByID){
f.another_email.style.background = "yellow";
}
return false;
}
}
// -->
</script>
Next, in your form, you should have a field that asks a user to enter their e-mail address. You must also include the the onsubmit event handler, which will point to your validation script. The validation script will utilize the check_email function. The beauty of the check_email function is that it can be used over and over again. Below is a simple example of a simple form that asks for two email addresses. Note that the keyword this is passed to the check_form function. It tells the function which form to check.
<form action="somecgiscript.cgi" onSubmit="return check_form(this)">
Name <input type="Text" name="name"><br>
E-mail<input type="Text" name="email"><br>
E-mail2<input type="Text" name="another_email"><br>
<input type="Submit" value="Submit">
</form>
Copy and paste all three sections of code above into a document (in any order) and you will have working example. Keep reading if you are going to have the JavaScript printed by a cgi script.
CGI scripts will need to escape (preceed with a backslash) any metacharacters contained in the JavaScript so that the CGI script does not think those characters are Perl Syntax. And there are many metacharacters in this JavaScript snippet. Below is the JavaScript you should use if you are going to have the JavaScript printed by a CGI script. Make sense?
#!/usr/bin/perl
print qq~Content-Type: text/html\n\n~;
print qq~
<script>
<!--
// Email Validation. Written by PerlScriptsJavaScripts.com
function check(e) {
ok = "1234567890qwertyuiop[]asdfghjklzxcvbnm.\@-_QWERTYUIOPASDFGHJKLZXCVBNM";
for(h=0; h < e.length ;h++){
if(ok.indexOf(e.charAt(h))<0){
return (false);
}
}
if (document.images) {
re = /(\@.*\@)\|(\\.\\.)\|(^\\.)\|(^\@)\|(\@\$)\|(\\.\$)\|(\@\\.)/;
re_two = /^.+\\@(\\[?)[a-zA-Z0-9\\-\\.]+\\.([a-zA-Z]{2,3}\|[0-9]{1,3})(\\]?)\$/;
if (!e.match(re) && e.match(re_two)) {
return (-1);
}
}
}
// -->
</script>
~;
Please excuse the small font, we needed to squeeze the code in so that it did not wrap. The only difference between this example and the one above, is that all metacharacters have been escaped with a backslash \. Metacharacters include the following : $ @ \ . |
|
