Проверка на ввод javascript email

JavaScript: HTML Form — email validation

Validating email is a very important point while validating an HTML form. In this page we have discussed how to validate an email using JavaScript :

An email is a string (a subset of ASCII characters) separated into two parts by @ symbol. a «personal_info» and a domain, that is [email protected]. The length of the personal_info part may be up to 64 characters long and domain name may be up to 253 characters.

The personal_info part contains the following ASCII characters.

• Uppercase (A-Z) and lowercase (a-z) English letters.
• Digits (0-9).
• Characters ! # $ % & ‘ * + — / = ? ^ _ ` < | >~
• Character . ( period, dot or fullstop) provided that it is not the first or last character and it will not come one after the other.

The domain name [for example com, org, net, in, us, info] part contains letters, digits, hyphens, and dots.

Example of valid email id

Example of invalid email id

• mysite.ourearth.com [@ is not present]
• [email protected] [ tld (Top Level domain) can not start with dot «.» ]
• @you.me.net [ No character before @ ]
• [email protected] [ «.b» is not a valid tld ]
• [email protected] [ tld can not start with dot «.» ]
• .mysite@mysite.org [ an email should not be start with «.» ]
• mysite()*@gmail.com [ here the regular expression only allows character, digit, underscore, and dash ]
• [email protected] [double dots are not allowed]

JavaScript code to validate an email id

function ValidateEmail(mail) < if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w)+$/.test(myForm.emailAddr.value)) < return (true) >alert("You have entered an invalid email address!") return (false) > 

To get a valid email id we use a regular expression /^[a-zA-Z0-9.!#$%&’*+/=?^_`<|>~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/. According to http://tools.ietf.org/html/rfc3696#page-5 ! # $ % & ‘ * + – / = ? ^ ` . < | >~ characters are legal in the local part of an e-mail address but in the above regular expression those characters are filtered out. You can modify or rewrite the said regular expression.

Regular Expression Pattern

Let apply the above JavaScript function in an HTML form.

JavaScript Code

function ValidateEmail(inputText) < var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w)+$/; if(inputText.value.match(mailformat)) < alert("Valid email address!"); document.form1.text1.focus(); return true; >else < alert("You have entered an invalid email address!"); document.form1.text1.focus(); return false; >> 

li .mail < margin: auto; padding-top: 10px; padding-bottom: 10px; width: 400px; background : #D8F1F8; border: 1px soild silver; >.mail h2 < margin-left: 38px; >input < font-size: 20pt; >input:focus, textarea:focus < background-color: lightyellow; >input submit < font-size: 12pt; >.rq

RFC 2822 standard email validation

Regular Expression Pattern (Ref: https://bit.ly/33cv2vn):

/(?:[a-z0-9!#$%&'*+/=?^_`<|>~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`<|>~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]| \\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?| \[(?:(?:253|227|[01]?26?)\.)(?:253|234|[01]?62?|[a-z0-9-]*[a-z0-9]: (?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/

You can use the following email addresses to test the said Regular Expression:

List of Valid Email Addresses

• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• email@[123.123.123.123]
• «email»@example.com
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]

List of Strange Valid Email Addresses

Other JavaScript Validation:

• Checking for non-empty
• Checking for all letters
• Checking for all numbers
• Checking for floating numbers
• Checking for letters and numbers
• Checking string length
• Email Validation
• Date Validation
• A sample Registration Form
• Phone No. Validation
• Credit Card No. Validation
• Password Validation
• IP address Validation

Test your Programming skills with w3resource’s quiz.

Follow us on Facebook and Twitter for latest update.

JavaScript: Tips of the Day

Sort array of objects by string property value

It’s easy enough to write your own comparison function:

function compare( a, b ) < if ( a.last_nom < b.last_nom )< return -1; >if ( a.last_nom > b.last_nom ) < return 1; >return 0; > objs.sort( compare );

objs.sort((a,b) => (a.last_nom > b.last_nom) ? 1 : ((b.last_nom > a.last_nom) ? -1 : 0));

• Weekly Trends
• Java Basic Programming Exercises
• SQL Subqueries
• Adventureworks Database Exercises
• C# Sharp Basic Exercises
• SQL COUNT() with distinct
• JavaScript String Exercises
• JavaScript HTML Form Validation
• Java Collection Exercises
• SQL COUNT() function
• SQL Inner Join
• JavaScript functions Exercises
• Python Tutorial
• Python Array Exercises
• SQL Cross Join
• C# Sharp Array Exercises

We are closing our Disqus commenting system for some maintenanace issues. You may write to us at reach[at]yahoo[dot]com or visit us at Facebook

Источник

Как сделать валидацию Email на Javascript

Есть текстовое поле, куда пользователь должен вводить E-mail.

Первым делом добавляем input в HTML. Здесь все просто:

Для простоты восприятия предположим, что больше на странице ничего нет, поэтому не станем добавлять лишние атрибуты.

Так как подсветка должна меняться в реальном времени, добавим «слушатель» на input :

const input = document.querySelector('input'); input.addEventListener('input', onInput); 

Функция onInput будет менять цвет css-свойства border на зеленый, если введенный в input текст валиден, или на красный — если нет.

const EMAIL_REGEXP = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"])$/iu; const input = document.querySelector('input'); function onInput()  if (isEmailValid(input.value))  input.style.borderColor = 'green'; > else  input.style.borderColor = 'red'; > > input.addEventListener('input', onInput); function isEmailValid(value)  return EMAIL_REGEXP.test(value); 

Функция isEmailValid будет сравнивать введенное пользователем значение с регулярным выражением. В успешном случае функция вернет true , иначе — false .

Вот и все! Скрипт готов. Его работу вы можете проверить в моем Codepen.

Источник

Проверка адреса email и номера телефона на javascript

Предоставляя пользователю возможность заполнения полей на сайте, следует проверять введенные данные на валидность. Это позволит предупредить пользователя о случайных ошибках, а так же даст дополнительную защиту от спама. Ярким примером является форма обратной связи, обязательными полями которой часто бывают email и телефон. Займемся их проверкой на правильность заполнения с помощью javascript.

Информация лучше воспринимается на примерах, поэтому посмотрим готовую форму в действии:

Пожалуйста, заполните все поля формы!

Для начала разберем применяемые регулярные выражения, а полный код формы и javascript функций я приведу в конце статьи.

Валидность адреса электронной почты

• Название (test) — один или много символов;
• Знак собаки (@);
• Доменное имя почтового сервера (mail) — один или много символов;
• Точка (.);
• Доменное имя первого уровня (ru) от двух до пяти букв.

Составим регулярное выражение для наших требований:

Разберём правило по частям:

1. Регулярное выражение должно открываться и закрываться символами «/» . После закрывающегося символа можно указать директиву. В нашем случае такой директивной является «i» , которая отключает проверку вводимых букв на регистр. То есть, становится не важно, ввели «test@mail.ru» или «Test@Mail.RU».
2. Знаки «^» и «$» обозначают начало и конец проверяемой строки. Если их убрать, то правило вернет положительный результат даже если в начале или конце электронного адреса поставить запрещенные знаки. То есть, при вводе «%:&test@mail.ru#6&» функция проверки вернет положительный результат, так как в строке имеется последовательность символов, удовлетворяющая нашему правилу. Для исключения такой возможности указываем, что правило должно применяться ко всей строке, а не к её части.
3. Блок «[\w-\.]+» отвечает за проверку названия ящика. В квадратных скобках указываем разрешенные символы: «\w» — все латинские буквы, цифры и знак подчеркивания. Так же рекомендую добавлять знак тире и точку «-\.» . «+» после квадратных скобок указывает на возможность повторения символов — один или много раз.
4. Далее идет знак собаки и доменное имя почтового сервера — «@[\w-]+» . Здесь практически тоже самое что и в предыдущем блоке. Исключаем только из набора символов точку.
5. Осталось прописать правило для проверки наличия точки и корректности доменного имени верхнего уровня (ru,com,info). «\.[a-z]» . Для обозначения знака точки мы указываем её с обратным слешем «\.» Без него она будет восприниматься зарезервированным символом регулярки, который обозначает возможность наличия на её месте любого символа. За точкой должно следовать доменное имя верхнего уровня. Это минимум 2 латинские буквы — «[a-z]» .

Разобранный пример немного упрощен для лучшего восприятия. У него есть недостаток — первым знаком в email не может быть тире или точка, но приведенное регулярное выражение этого не учитывает. Чтобы это исправить следует его немного поправить:

Проверка валидности номера телефона в javascript

С номером телефона ситуация сложнее, так как номер можно ввести десятками способов:

Есть несколько выходов из ситуации:

• продумать все возможные шаблоны и составлять для них правила;
• заставить посетителя вводить телефон по определенному шаблону;
• ограничиться проверкой на случайные ошибки.

Для форм обратной связи последний вариант кажется наилучшим. Во-первых, если человек не хочет указывать свой номер телефона, то никакие проверки на корректность не помогут. Он просто введет несуществующий или чужой номер. Во-вторых, посетители сайта не любят когда их загоняют в определенные рамки. Поэтому рекомендую использовать регулярное выражение следующего типа:

В правиле указываем что первый символ должен быть обязательно цифрой или плюсом «[\d\+]» , а последний только цифрой — «\d» . В середине разрешаем использовать скобоки, пробел и знак дефиса — «[\d\(\)\ -]» , от 4 до 14 символов. Так как скобки и пробел являются зарезервированными элементами регулярных выражений, перед ними ставим обратный слеш.

Для любителей жестких шаблонов приведу пример проверки номера вида 8 (999) 123-45-64

Исходный код примера: html и javascript

Это полный код тестовой странички, на которой я использовал форму и js скрипты для отладки правил из этой статьи. Можете скопировать его и протестировать у себя на компьютере.

      
Пожалуйста, заполните все поля формы!
 E-mail:  
Телефон:  
   

Это демонстрационная версия. В случае с формой обратной связи нам следует проводить проверку полей не при нажатии на кнопку, а при попытке отправить её:

В этом случае форма отправится только если обе функции вернут значение «true».

Источник

Vanilla JavaScript Email Validation

In this tutorial we are learning how to validate an email address in JavaScript with Regex. Follow the steps and see the live demo on Codepen.

Today I want to address a topic I use pretty often but noticed I’ve never written about:

Email validation.

Since my day job is in marketing, we build many pages with forms, and the least we need is an email address. So how do we ensure the email input is a valid email address with pure JavaScript?

HTML Structure permalink

We’ll use a straightforward form for today’s work, with only an email input and a button to submit. Then we’ll have a response div to show us if the email was correct.

div class="container"> input type="email" id="emailField" /> br /> button id="button">Check validationbutton> div id="response">div> div>

JavaScript Validating an Email Address permalink

Ok, now on to the fun part, the JavaScript ! Let’s start by defining the variables we need to validate the email:

const emailField = document.getElmentById('emailField'); const button = document.getElementById('button'); const response = document.getElementById('response');

Fantastic, very basic CSS selectors, but enough for this exercise.

Now we want to add a click listener to the button element.

button.addEventListener('click', function ()  const email = emailField.value; console.log(email); >);

This function will log the value from the input field to the console.

So now let’s make our actual validation function to check if it validates correctly:

function validateEmail(email)  const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[4 \.7 \.7 \.2 \])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z] ))$/; return re.test(String(email).toLowerCase()); >

BAM! Please don’t be scared; it’s a plain old regular expression . This will validate a valid email format.

It will return true or false, depending on the email.

So let’s implement this into our button click function.

button.addEventListener('click', function ()  const email = emailField.value; if (validateEmail(email))  response.innerHTML = 'Hiya Cowboy, this email will work for us 🤠'; > else  response.innerHTML = 'Sorry, this email is not cool enough 😩'; > >);

There we go! This is how you validate email inputs in a form with Regex. Of course, you would like to do something with this information, but I’ll leave that up to you!

View the example code in this Codepen permalink

Thank you for reading, and let’s connect! permalink

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Источник