Angular2电子邮件验证

Ser*_*giu 34 email-validation angular

我是学习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.!#$%&’*+/=?^_`{|}~-]+@[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>
Run Code Online (Sandbox Code Playgroud)

Jak*_*nan 56

Angular 4有一个内置的"电子邮件"验证标记,可以在输入中添加.例如:

<input type="email" id="contactemail" email>
Run Code Online (Sandbox Code Playgroud)

这将对一系列数字和字母有效,然后是@然后是另一系列字母.它不会考虑@之后的点 - 因为您可以在输入和标准正则表达式中使用"pattern"标记.

  • 不要求以.com或任何类型的方式结束电子邮件地址.user @ localhost有效 (6认同)
  • 当以这种方式使用它时,隐含地需要输入 - 即使没有指定"必需".错误或功能? (4认同)
  • 解决.用这个`<input type ="text"class ="form-control"#userEmail ="ngModel"name ="email"[(ngModel)] ="email"pattern ="^\w +([\ .-]?\w +)*@\w +([\ .-]?\ w +)*(\.\ w {2,3})+ $"[ngClass] ="{invalid:userEmail.touched &&!userEmail?.valid} "必填电子邮件>` (3认同)

MMK*_*MMK 38

尝试类似的东西

<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>
Run Code Online (Sandbox Code Playgroud)

  • &lt;label for="CompanyEmail" class="control-label"&gt;公司电子邮件&lt;/label&gt; &lt;input id="CompanyEmail" type="text" [(ngModel)]="_user.Email" class="form-control "pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2, }" required #CompanyEmail="ngModel" placeholder="请输入公司电子邮件地址" /&gt; &lt;div *ngIf="CompanyEmail.invalid &amp;&amp; (CompanyEmail.dirty || CompanyEmail.touched)" class="alert alert-danger"&gt; &lt;div *ngIf="CompanyEmail.errors.required"&gt; 公司电子邮件为必填项。&lt;div *ngIf="CompanyEmail.errors &amp;&amp; CompanyEmail.errors.pattern"&gt; 电子邮件无效 (2认同)

小智 27

Angular 4电子邮件验证:

  • 使用电子邮件进行输入
  • 如果你想.com用于电子邮件,请使用模式模式="[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>`
Run Code Online (Sandbox Code Playgroud)

  • 谢谢-这是我尝试过的至少9到10个中的第一个,它确实有效。 (3认同)

Ham*_*ghi 5

您可以将此模式用于电子邮件输入:

^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$
Run Code Online (Sandbox Code Playgroud)

参考

除了“sample@domain.dom”之外,此模式还接受“sample@domain”。使用此电子邮件模式“sample@domain”。不可接受,并且不允许使用 1 个字母的域名 tld(“sample@domain.s”出错)。