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

Я новичок в обучении Angular2, и я хочу создать форму проверки, которая проверяет электронные письма после шаблона RegEx.

Мой код выглядит примерно так, но я понятия не имею, правильно ли я делаю это, или что я сделал не так, может кто-нибудь, пожалуйста, помогите мне немного?

Спасибо!

Я исправил его. Спасибо вам всем.

<div class="alert-email">
    <label for="contactemail">EMAIL: </label>
    <input type="email" id="contactemail" name="contactemail"
           required ng-pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-][email protected][a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/"
           [(ngModel)]="model.contactemail" #contactemail="ngModel"
           placeholder="Your email" /><br><br>
    <div *ngIf="contactemail.errors && (contactemail.dirty || contactemail.touched)" class="alert-email alert-danger-email"><br>
      <div [hidden]="!contactname.errors.required">
        Email is required
      </div>
      <div [hidden]="!contactname.errors">
        Please input a valid email.
      </div>
    </div>
  </div>

ОТВЕТЫ

Ответ 1

Попробуйте что-то вроде этого

<div class="alert-email">
        <label>Email</label>
            <input
                id="contactemail"
                type="text"                
                #contactemail="ngModel"
                [(ngModel)]="model.contactemail"
                required
                pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">

        <div class="md-errors-spacer" [hidden]="contactemail.valid || contactemail.untouched">
            <div  *ngIf="contactemail.errors && contactemail.errors.required">
                Email is required
            </div>
            <div  *ngIf="contactemail.errors && contactemail.errors.pattern">
                Email is invalid
            </div>
        </div>
    </div>

Ответ 2

Angular 4 имеет встроенный тег проверки подлинности электронной почты, который можно добавить во вход. Например:.

<input type="email" id="contactemail" email>

Это будет справедливо для ряда чисел и букв, затем @, затем еще одной серии букв. Он не учитывает точку после @- для этого вы можете использовать тег "pattern" внутри входа и стандартного регулярного выражения.

Ответ 3

Angular 4 Проверка электронной почты:

  • Используйте адрес электронной почты для ввода
  • Если вы хотите .com для шаблона использования электронной почты pattern = "[a-zA-Z0-9.-_] {1,} @[a-zA-Z.- ] {2,} [.] {1} [A-Za-Z] {2,}

Финал:

`<input type="email" [(ngModel)]="enterEmail" name="myEmail" #myEmail="ngModel" email pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}" required>`

Ответ 4

Для проверки нескольких адресов электронной почты в одном поле вы можете сделать это с помощью специального средства проверки электронной почты.

import { FormControl } from '@angular/forms';

export class EmailValidator {

public static isValid(email) {
    var re = /^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
}

static isMultiValid(control: FormControl): any {

  console.log(control.value);
  let tempEmail = control.value;
  let invalid = false;
  let regex =/[a-z0-9!#$%&'*+=?^_'{|}~-]+(?:\.[a-z0-9!#$%&'*+=?^_'{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/g;

  if(tempEmail.indexOf(',') > -1){
    var emails = control.value.split(',');
      for (let email of emails) {
        console.log(email);
        let isValid = EmailValidator.isValid(email)
        if(!isValid){
          return{"email not valid":isValid}
        }
      }
      return null;
  }
  else{
    let email = control.value.split(',');
    if( email == "" || ! regex.test(email)){
        invalid = true;
        return {
            "email not valid": invalid
        };
    }
    console.log("valid");
    return null;

   }
  }
}

,

Ответ 5

Вы можете использовать этот шаблон для ввода электронной почты:

^[a-z0-9._%+-][email protected][a-z0-9.-]+\.[a-z]{2,4}$

ссылка

Этот шаблон принимает "sample @domain" также в дополнение к "[email protected]". Используя этот шаблон электронной почты "образец @домен". недопустимо и недопустимо однобуквенное доменное имя tld ("[email protected]" идет не так).

Ответ 6

Этот pattern работал для меня:

 pattern="[a-zA-Z0-9.-]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{3,}"

Ответ 7

Попробуйте этот, он будет работать:

^ [A-Za-Z] + ([.-]? [A-Za-Z0-9] +) * @([A-Za-Z] + ([.-]? [A-Za-Z] )) [.] {1} [A-Za-Z] {2,} $