Проверка ввода email html

Validating email addresses

One of the new values to the type attribute is email. Using this type of field instead of the regular text field the browser uses a regular expression to check that the user has in fact typed in an email address. Does this means that the user cannot type in a fake email address? No. But you do not have to worry that the user types in a comma instead of a period or that she accidentally types a space. No matter what the user is going to submit, it is going to look like an email address. Here is how it looks:

Some browsers only look for the @ and other browsers look for at pattern consisting of a @ followed by at least one letter and a dot.

As of right now, this is not supported by e.g. Internet Explorer 9.0 and previous version or by the Android browser. This means that in order to have valid email validation for these browsers you will have to make a work-around to have this feature working in all browsers. This does not mean that you should not implement the attribute email, because if the browser does not regocnize type=»email» it will just treat is as type=»text» and render it as plain text.

Using patterns to validate email addresses

Another way to validate email addresses is to use the pattern attribute. As mentioned in the chapter about patterns, the pattern can be anything you specify and it is based on regular expressions. I will not go further into the subject of regular expressions as this is a very comprehensive subject.

All you need to know to use patterns to validate email addresses is which pattern to use. The following HTML5 email address regular expression is close to a complete example of what your pattern could look like. (Thanks to Gervase Markham). Here is what the pattern looks like:

As you can see the pattern is pretty intricate, but basically it checks whether or not the user input looks like a normal email address such as janedoe@unknown.com

Type=»email» or pattern?

As both ways of validating email addresses has their pros and cons it is up to you to decide which one to use. You should not try to use them both at the same time as this might induce a clash in browsers that support both features. Using type=»email» has the advantage that it is semantically correct both using the pattern attribute has the advantage that there are several easy-to-use polyfills on the web which ensures support for a greater range of audience.

What you have learned

• Using HTML5 the semantically correct way of validating email addresses is to set the type attribute to email, type=»email»
• Not all browsers look for the same pattern when validating email addresses
• You can also use the pattern attribute to validate email addresses
• The type=»email» ensures semantically correct HTML5 where as the pattern attribute might ensure a valid email address more frequently
• The pattern attribute can be supported using a polyfill

Is your preferred language not on the list? Click here to help us translate this article into your language!

Источник

Simple guide to HTML Email Validation

While email validation seems like a simple concept in theory. We all know what emails are supposed to look like. As a developer, I’ve always found it really hard to come up with a straightforward way of validating emails in HTML.

What if the person enters their name instead of their e-mail address? Should it still be valid? And how do we deal with those annoying «.» and «@» symbols and their placement in the string? Before we dive into email validation in HTML, you can read more about what is email validate if you’d like.

With HTML5, we can use a dedicated attribute called «type» to specify that we want to accept an e-mail address. This simple solution is a breeze to implement thanks to HTML5 and provides a basic level of email validation with little to no effort.

Before HTML5, you had to use JavaScript code or something similar to validate it. That was before HTML5 came along and offered us a far simpler solution, by giving us an input type=»email» that will easily validate email addresses!

Don’t reinvent the wheel.
Abstract’s APIs are production-ready now.

Abstract’s suite of API’s are built to save you time. You don’t need to be an expert in email validation, IP geolocation, etc. Just focus on writing code that’s actually valuable for your app or business, and we’ll handle the rest.

HTML email validation

So what exactly is an input type element? These input elements of type email allow the user to enter and modify an e-mail address.

The input value is validated to ensure that a properly formatted e-mail address populates the field before the form can be submitted.

On browsers that don’t support inputs of type email, an email input type falls back to being a standard text input.

When setting the HTML input type with email address validation, you can also specify these additional attributes:

• list — The id of a datalist element located in the same document.
• maxlength — The maximum number of characters the user can enter into the email input.
• minlength — The minimum number of characters the user can enter into the email input.
• multiple — a boolean, that when true, allows the user can enter a list of multiple e-mail addresses, separated by commas and, optionally, whitespace characters.
• pattern — The attribute, pattern, when specified, is a regular expression that the input’s value must match in order for the value to pass constraint validation. It must be a valid JavaScript regular expression. For example, email addresses will need to end in “@email.com to pass the email validation check below:

 input type="email" pattern=".+@email\.com" required 

• placeholder — This is suggested text that populates the email address by default.
• readonly — When this property is enabled, you cannot edit the input field, but only view the text that populates the field.
• size — The size attribute is a numeric value indicating how many characters wide the input field should be. The value must be a number greater than zero, and the default value is 20.

Validate emails with input type=»email»

There are two levels of content validation available for email inputs. First, there’s the standard level of validation offered to all inputs, which automatically ensures that the input type meets the requirements to be a valid email address.

However, there is also the option to add additional filtering to ensure that your own specialized needs are met, if you have any.

Checking for and invalid email address

If you need the entered email addresses to be restricted further than any string that seems like a valid email address, you can use the attribute, pattern, to specify a regular expression(Regex) the value must match for it to be valid.

Using an input pattern provides an extra level of email validation on top of the basic one provided by the input itself. You can learn more about regular expressions in this Email Regex guide. If the multiple attribute is specified, each individual item in the comma-separated list of values must match the regular expression. More on this in the next section.

Verifying multiple emails

If the multiple attribute is specified alongside the input element, you will be able to enter multiple addresses instead of a single input.

By adding this boolean multiple attribute, the input can be configured to accept multiple email addresses. Here’s the simplest possible example of using the multiple attribute:

The input is now considered valid when a single email address is entered, or when any number of email addresses is separated by commas and, optionally, some number of whitespace characters are present. When multiple is used, the value is allowed to be empty.

Here are examples of valid strings when multiple is specified:

• «example@email»
• «example@email.org»
• «example@email.org,example2@email.org»
• «example@example.org, example2@email.org»
• «example@email.org,example2@email.org, example@email.org»

Here are some examples of invalid strings and each invalid email address will be rejected:

Regex and the pattern attribute

Browsers that support the email input element allow for seemingly automic email validation. But what is going on in the background?The input element validation is equivalent to the following regular expression:

 /^[a-zA-Z0-9.!#$%&'*+\/=?^_`<|>~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-][a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-][a-zA-Z0-9])?)*$/ 

If you need the email address that was entered to be restricted further than simply any string that looks like an email address, you can use the attribute pattern to specify a regular expression that the entered text must match in order pass the validation.

If the multiple attribute is specified, each individual item in the comma-delineated list of values must match the regular expression.

HTML Form validation example

Let’s look at an example of how we can validate an HTML form. Imagine we have a company and we want to restrict the domain of our email address to be our company name.

Note, the domain of an email address is what comes after the @ symbol. For example the domain for the email address example@gmail.com is “gmail”.

Now let’s implement email address validation that restricts the email addresses to the domain “mycompany”.

We can validate against both the standard email address validation and the specified pattern, Look at the HTML form example below:

 form div label for="emailAddress">Enter email address /label br input type="email" size="64" maxLength="64" required placeholder="username@mycompany.com" pattern=".+@mycompany\.com" title="Please provide only a My Company email address" /div /form 

Should you use type=email or pattern?

Type email might be sufficient if you need to check that the text entered by the user into the input box takes the form and structure of any email address. If you need any additional validation on top of this I would use the attribute pattern.

For example, if you only want to accept email addresses from a particular domain, like “@mycompany.com”, you will want to use the attribute pattern to do this. No matter what method you use for your client side validation, you should also implement some form of server side validation. This will ensure the data that gets entered into your database is correct.

Using APIs to check for a valid email address

One alternative to using HTML input validation, is to use an API. One such API is the email validation and verification API from Abstract. This API provides a more thorough examination and will ensure tha a valid email address is entered.

You can learn the following information and perform the following checks using the Abstract API:

• Typo checking and smart suggestion for errors.
• Disposable and free email providers check allows you to only retain high-quality email addresses.
• The API is Privacy friendly being GDPR and CCPA compliant.
• The API can perform real-time MX & SMTP check ensuring the address is valid and in-use.

Abstract APIs are trusted by some of the biggest and best establishments in the industry such as Accenture, Google, and Standford.

If you think the our email validation service is a good fit for your specific project, you can try it for completely free and implement it in your software solution immediately!

Validate emails instantly using Abstract’s email verification API!

Источник