Проверка за валиден e-mail адрес с JavaScript

taffch0 трудност:

видян: 12055

Потребителят винаги може да въведе невалидна информация, затова почти задължително е винаги да сме проверили нейната коректност преди да я приемем и запазим. В този урок ще се запознаем малко със CSS3, HTML 5 и най-вече JavaScript, като се опитаме да открием и спрем невалидните имейл адреси. Предложеното решение не е най-ефективния метод, тъй като не използваме регулярни изрази, но в следващите уроци ще се запознаем и с тях.

Първоначално ще започнем с малко стилизиране на формата(все пак трябва да изглежда долу-горе добре), като ще обърнем и малко внимание на HTML5 и CSS3. Но все пак идеята на урока е как да проверим e-mail адреса с JavaScript, затова няма да задълбочаваме много в тези познания.

Създаване на основите на страницата

Както обещах ще направим малко стил на страницата. Разбира се, вие можете да я направите както сметнете за добре и както ви харесва, а и има вероятност тази проверка да е част от друг ваш по-голям проект като например логин система.

Започваме със създаването на html файл. Можете да го именувате както си поискате – за целите на урока файла ще се казва “validEmail.html“. След създаването на файла е време да създадем основата на страницата именно тук идва необходимостта от познанията ви по html.

В случая нашият body таг ще съдържа един основен <div>, чието id ще бъде именувано “content” и един <form> таг вътре, в който ще разположим текстовото поле и бутонът за проверка на имейл адреса. Повече подробности за съдържанието са добавени като коментари.

Тоест след всичко казано дотук, вашият html файл би трябвало да изглежда по този начин:

<html>
<head>
<!-- Слагаме заглавие на страницата си -->
<title> Проверка за валиден имейл адрес с JavaScript </title>
<!-- Указваме кодирането на знаците в страницата -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Тук ще стои пътят до css файла -->
<!-- Тук ще стои пътят до javascript файла -->

</head>

<body>
<div id="content">
<h1> Проверка за валидност на имейл адрес</h1>
<form id="checkEmail">
<input type="text" placeholder="Вашият Email тук..." />
<p></p>
<input type="submit" value="Провери!" />
</form>

<p> <a href="#">Към урока »</a> </p>
</div>
</body>
</html>
</head>
<body>
<!-- Основния div таг на сайта държащ съдържанието -->
<div id="content">
<h1> Проверка за валидност на имейл адрес</h1>
<!-- Формата, която съдържа полето за имейл адреса и бутона за проверка -->
<form id="emailForm">
<!-- Текстово поле за въвеждане на имейл адреса -->
<input type="text" name="email" id="email" placeholder="Вашият Email тук..." />
<!-- В този <p> таг с class="msg" ще изведем дали имейл адреса е приет
или не -->
<p id="msg"></p>
<!-- И последно бутонът за проверка на въведеното съдържание -->
<input type="button" value="Провери!" onClick="validate();" />
</form>
</div> <!-- Затваряме <div class="content"> -->
</body>
</html>

Тъй като сме използвали непознато, може би за някои от читателите, свойство на текстовото поле – placeholder – ще обясня неговата роля. placeholder=”Вашият имейл тук…” поставя текста “Вашият имейл тук” в текстовото поле, но когато някой го извика на фокус, тоест кликне върху него, въпросният текст изчезва. Ако полето се остави празно и извън фокус, текста отново се появява. Същата техника може да се направи и с JavaScript, но само с едно html5 свойство става много по-бързо и удобно.

Към бутона е добавено свойство onClick, на което ще се спрем по-късно.

Стилизиране на формата

След като сме си създали html-а на страницата е време да и добавим малко стил. Ако сте нетърпеливи можете да я отворите и погледнете и в този неин вид, но може би няма да ви хареса особено как изглежда. За да може това да стане сега ще добавим и малко css.

Първоначално е нужно да си създадете нов файл с име main.css/style.css и да го сложите в папка с име css, style или както вие си изберете. Не е задължително да следвате всички съвети. Нужно е обаче папката ви да се намира при html файла, за да е по-лесно добавянето на пътя към нея. За да може да използвате въпросния css файл е нужно да го добавите към html документа. На мястото на <!–Тук ще стои пътят до css файла –> от предишния код, сложете следния ред:

<link rel="stylesheet"  href="css/main.css" type="text/css" media="all" />

Както знаете src=”път-до файл” указва пътя до css файла. Именно затова ако сте сложили файла в различна папка, или сте го именували по различен начин, напишете пътя така, че да отговаря на вашия случай.

Предстои да стилизираме единствено елементите, от които се нуждаем. Все пак, не правим цял уеб сайт и в случая няма да ни е нужен стил на линковете, например. Време е да добавим съдържанието на css файла, а то ще е следното:

html, body {
background-color: #2c6092;
color: #fff;
font-family: Arial, Arial black, sans;
font-size: 16px;
text-align: center;
}

/*Стил главното съдържание на сайта */

#content {
width: 700px;
height: auto;
margin: 0 auto;
margin-top: 100px;
}

form {
width: 350px;
height: auto;
margin: 0px auto;
}

/* Стил на заглавието */

h1 {
font-size: 36px;
text-shadow: 0px 1px 1px #333;
}

#msg {
color: #ff7d00;
}

/* Ще използваме този клас за заоблянето на текстовото поле и бутона,
за да не се налага да добавяме тези свойства към всеки елемент поотделно.
Когато ги имаме така просто към всеки елемент, който искаме да е със
заоблени ъгли ще добавим клас all-corner */

.all-corner {

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

/* Стил на текстовото поле за въвеждане на имейл адреса */

input.text {
width: 350px;
height: 45px;
border: 3px solid #a7d7f7;
outline: none;
margin: 5px;
margin-bottom: 15px;
padding: 10px;
}

/* Стил на бутона за проверка */

input.btn {
cursor: pointer;
font-size: 16px;
font-weight: bold;
color: #fff;
padding: 10px;
border: 3px solid #fe9e29;
background-color: #fe9e29;
background: -moz-linear-gradient(100% 100% 90deg, #c67614, #fe9e29);
background: -webkit-gradient(linear,0% 0%, 0% 100%,from(#fe9e29),to(#c67614));
text-shadow: 0px 1px 1px #000;
}

Като цяло по-голямата част от стила се базира на общите познания по CSS, които трябва да притежавате. По-особените свойства, които сме използвали в стила са част от CSS3 и ще им обърнем малко внимание по-напред.

След това добавяне на стил, нашата страница за проверка на валидността на email адрес би трябвало да изглежда така в браузърите, които поддържат, използваните CSS3 свойства:

При тези, които не подържат CSS3 и/или HTML 5 същата страница ще изглежда прилично, но ще отсъстват сенки, заобляния и градиенти.

Кои CSS3 свойства сме използвали?

Първоначално за заглавието h1 сме използвали свойството text-shadow, което ви позволява да си добавите сянка към даден текст. Първият аргумент, който му даваме е координата X на сянката спрямо, текста. Вторият аргумент е координатата Y на сянката спрямо, текста. Третият е радиусът на сянката, а четвъртият указва цвета на сянката. В друг урок ще се запознаем по-подробно с тези свойства.

Следващата част, която ще разгледаме e класа .all-corner. Там сме използвали заобляне със CSS3. Както можете да видите, това става със свойството border-radius, приемащо само 1 аргумент и това е степента на заоблянето в пиксели. За да е поддържано при повече браузъри го пишем по три различни начина, като му добавяме представки, -moz-(за Mozilla Firefox) и -webkit-(за Safari, Google Chrome и други Webkit браузъри).

И накрая за последно сме направили CSS3 градиент на бутона – от светло оранжево към тъмно оранжево. Използваме свойството linear-gradient, но при различните браузъри, той приема различни аргументи. Може би за да го разберете ще са нужди повече обяснения, но накратко със представка -moz- аргументите са съответно – позиция, от която започва градиента(аналогично на background-postion може да е като число, процент или left, right, center и т.н.), позиция, в която спира градиента, наклон в градуси, първи цвят и втори цвят.

При webkit браузърите аргументите са тип на градиента, координати за начало, координати за край, първи цвят и втори цвят.

Толкова за CSS3, за да не натоварваме урока с много информация. Сега нека продължим със самия JavaScript и проверката на e-mail адреса.

Проверка на e-mail адрес с JavaScript

Вече ще се съсредоточим към самата проверка на имейл адреса. За проверката можем да използваме регулярни изрази, но в случая ще правим най-обикновени проверки, тъй като все още тук не сме обяснили регулярните изрази, но в някой от следващите уроци ще се запознаем и с тях. Ще имаме само една функция която ще именуваме validate(). Тя ще проверява дали в адреса се съдържа @ и точка; дали точката е поне един знак след @ и дали след точката има достатъчно на брой знака. Функцията ще обособим в отделен файл за по-добра прегледност.

Създайте си папка с име js и направете нов файл с име script.js в нея. За да можем да използваме проверката от новия JavaScript файл ще е нужно да го включим в html-а. На мястото на <!– Тук ще стои пътят до javascript файла –> поставете следният ред html, като на мястото на src=”" трябва да стои пътят до вашия JavaScript файл:

<script type="text/javascript" src="js/script.js"></script>

Ако си спомняте он началото на урока към бутона във формата за проверка на адреса имахме едно събитие onClick, при чието засичане извикваме функцията validate(). Именно тази функция, в случая ще се намира във файла script.js.

Съдържанието на script.js ще е следното:

function validate()
{
var email=document.forms["emailForm"]["email"].value;
// Проверяваме позицията, на която се намира @
var atpos=email.indexOf("@");
// Проверяваме позицията, на която се намира точката
var dotpos=email.lastIndexOf(".");

if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length)
{
document.getElementById('msg').innerHTML =
'Въведеният email адрес е невалиден.';
return false;
}
else
{
document.getElementById('msg').innerHTML =
'Вие въведохте валиден имейл адрес.';
return true;
}
}

Във въпросната функция си създаваме една променлива, на която ще присвоим имейл адреса и две други, които ще съхраняват съответно позицията на @ и позицията на точката. Това инициализиране на променливи е последвано от if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length), където се извършват въпросните проверки на e-mail адреса. Проверяваме дали полето не е оставено празно, дали точката се намира след @ и дали имаме достатъчно знаци след точката.

Ако e-mail-а е преминал проверката извеждаме съобщение за успех, в противен случай съобщаваме, че е невалиден.

Това беше всичко от този урок. Надявам се да ви е бил полезен и интересен.

ПРЕПИСВАНЕТО Е ЗАБРАНЕНО !

Сподели |

Коментари (2)

BigMachine на 08.02 2012 в 11:59ч.

Много добър урок.Ще ми е от голяма полза. ;)

kimvaras на 01.05 2013 в 12:14ч.

Този урок е абсолюна боза и не работи правилно - ако има човек с emajl georgi.ivanov@gmail.com излиза че не е верен. Ето как се прави:

function validate(form_id,email) {

var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var address = document.forms[form_id].elements[email].value;
if(reg.test(address) == false) {

alert('Invalid Email Address');
return false;
}
}