通用电子邮件验证器 [英] Generic email validator
问题描述
我想创建一个表单,用户将在其中输入他的电子邮件.我想在客户端验证电子邮件格式.
Angular 2 中是否有任何通用的电子邮件验证器?
注意:类似于 AngularJS 验证器.>
您可以使用表单指令和控件来执行此操作.
导出类 TestComponent 实现 OnInit {myForm:控制组;邮件地址:控件;构造函数(私有构建器:FormBuilder){this.mailAddress = 新控件("",Validators.compose([Validators.required, GlobalValidator.mailFormat]));}this.addPostForm = builder.group({邮件地址:this.mailAddress});}
导入:
import { FormBuilder, Validators, Control, ControlGroup, FORM_DIRECTIVES } from 'angular2/common';
然后你的 GlobalValidator
类:
导出类 GlobalValidator {静态邮件格式(控制:控制):验证结果{var EMAIL_REGEXP =/^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;if (control.value != "" && (control.value.length <= 5 || !EMAIL_REGEXP.test(control.value))) {返回 { "incorrectMailFormat": true };}返回空;}}接口验证结果{[键:字符串]:布尔值;}
然后是您的 HTML:
<label for="mailAddress" class="req">电子邮件</label><input type="text" ngControl="mailAddress"/><div *ngIf="mailAddress.dirty && !mailAddress.valid" class="alert alert-danger"><p *ngIf="mailAddress.errors.required">mailAddress 是必需的.</p><p *ngIf="mailAddress.errors.incorrectMailFormat">电子邮件格式无效.</p>
有关这方面的更多信息,您可以阅读这篇好文章:https://medium.com/@daviddentoom/angular-2-form-validation-9b26f73fcb81#.jrdhqsnpg 或查看此 github 项目以获得 工作示例.
(那个正则表达式似乎没有检查域中的点
我用这个代替
/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[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,}))$/
I want to create a form where the user will enter his email. I'd like to validate email format client-side.
Is there any generic email validator in Angular 2?
NB: Something similar to AngularJS validator.
You can use Form Directives and Control to do this.
export class TestComponent implements OnInit {
myForm: ControlGroup;
mailAddress: Control;
constructor(private builder: FormBuilder) {
this.mailAddress = new Control(
"",
Validators.compose([Validators.required, GlobalValidator.mailFormat])
);
}
this.addPostForm = builder.group({
mailAddress: this.mailAddress
});
}
Import:
import { FormBuilder, Validators, Control, ControlGroup, FORM_DIRECTIVES } from 'angular2/common';
Then your GlobalValidator
class:
export class GlobalValidator {
static mailFormat(control: Control): ValidationResult {
var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;
if (control.value != "" && (control.value.length <= 5 || !EMAIL_REGEXP.test(control.value))) {
return { "incorrectMailFormat": true };
}
return null;
}
}
interface ValidationResult {
[key: string]: boolean;
}
And then your HTML:
<div class="form-group">
<label for="mailAddress" class="req">Email</label>
<input type="text" ngControl="mailAddress" />
<div *ngIf="mailAddress.dirty && !mailAddress.valid" class="alert alert-danger">
<p *ngIf="mailAddress.errors.required">mailAddressis required.</p>
<p *ngIf="mailAddress.errors.incorrectMailFormat">Email format is invalid.</p>
</div>
</div>
For more information about this, you can read this good article : https://medium.com/@daviddentoom/angular-2-form-validation-9b26f73fcb81#.jrdhqsnpg or see this github project for a working example.
(edit : that reg ex does not seem to check for a dot in the domain
I use this one instead
/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[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,}))$/
这篇关于通用电子邮件验证器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!