在angular 4上验证电子邮件 [英] validate email on angular 4
本文介绍了在angular 4上验证电子邮件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是角4中的反应形式的新手.如何在电子邮件中放入模式验证?我对 https://angular.io/api/forms/EmailValidator >
解决方案
如果您需要邮件验证程序,则可以使用我的代码:
导出类GlobalValidator{静态mailFormat(control:FormControl){const EMAIL_REGEXP =/^(([[^<>()\ [\] \\.,;:\ 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,}))$/;如果(control.value&!EMAIL_REGEXP.test(control.value)){返回 {确认电邮: {有效:错误,消息:无效的电子邮件."}};}返回null;}//其他验证器,例如数值,lowerCase,大写,条件,比较...}
以及设置表格的时间:
this.userForm = new FormGroup({电子邮件:new FormControl(空,[Validators.required,GlobalValidator.mailFormat]),displayName:新的FormControl(null),类型:new FormControl(null,[Validators.required]),密码:new FormControl(空,[Validators.required,Validators.minLength(6),GlobalValidator.numericRule,GlobalValidator.lowerCaseRule,GlobalValidator.upperCaseRule,GlobalValidator.nonAlpahuNericCaseRule]),passwordConfirm:新的FormControl(空,[Validators.required]),},GlobalValidator.compareValidator("password","passwordConfirm"));
这是完整的全局验证器:
导出类GlobalValidator{静态mailFormat(control:FormControl){const EMAIL_REGEXP =/^(([[^<>()\ [\] \\.,;:\ 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,}))$/;如果(control.value&!EMAIL_REGEXP.test(control.value)){返回 {确认电邮: {有效:错误,消息:无效的电子邮件."}};}返回null;}静态numericRule(control:FormControl){如果(control.value&&!(/\ d/.test(control.value))){返回 {numericRule:{有效:错误,消息:缺少数字字符."}};}返回null;}静态lowerCaseRule(控件:FormControl){如果(control.value&&!(/[a-z]/.test(control.value))){返回 {lowerCaseRule:{有效:错误,消息:缺少小写字符."}};}返回null;}静态upperCaseRule(控件:FormControl){如果(control.value&&!(/[A-Z]/.test(control.value)))){返回 {upperCaseRule:{有效:错误,消息:大写字符丢失."}};}返回null;}静态nonAlpahuNericCaseRule(control:FormControl){if(control.value&&!(/[\ W _] +/g.test(control.value))){返回 {nonAlpahuNericCaseRule:{有效:错误,消息:非字母数字字符丢失."}};}返回null;}静态compareValidator(fc1:字符串,fc2:字符串){return(group:FormGroup):{[key:string]:any} =>{如果(group.value){const password = group.value [fc1];const passwordConfirm = group.value [fc2];如果(密码!== passwordConfirm){返回 {compareFailed:{有效:错误,消息:密码不匹配."}}}}返回null;}}静态条件(条件:(group:FormGroup)=>布尔值,验证器){返回函数(控制){revalidateOnChanges(control);如果(control&& control._parent){如果(有条件的(control._parent)){返回验证器(控件);}}};}}函数revalidateOnChanges(control):void{如果(control&& control._parent&&!control._revalidateOnChanges){control._revalidateOnChanges = true;control._parent.valueChanges.distinctUntilChanged((a,b)=>{//这些将始终是来自表单的普通对象,进行简单比较如果(a&!b ||!a& b){返回false;} if if(a&& b&& Object.keys(a).length!== Object.keys(b).length){返回false;} if if(a&& b){为(让我进去){如果(a [i]!== b [i]){返回false;}}}返回true;}).subscribe(()=>{control.updateValueAndValidity();});}}
i'm new to reactive form in angular 4. how do i put a pattern validation in email? i'm confused with https://angular.io/api/forms/EmailValidator
app.component.htmlapp.component.tsmodal
解决方案
If you need mail validator, you can use my code:
export class GlobalValidator
{
static mailFormat(control: FormControl)
{
const EMAIL_REGEXP = /^(([^<>()\[\]\\.,;:\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,}))$/;
if (control.value && !EMAIL_REGEXP.test(control.value))
{
return {
validateEmail: {
valid: false,
message: "Not valid email."
}
};
}
return null;
}
//other validators like numeric, lowerCase, uppercase, conditional, compare ...
}
and when settings form:
this.userForm = new FormGroup({
email: new FormControl(null, [Validators.required, GlobalValidator.mailFormat]),
displayName: new FormControl(null),
type: new FormControl(null, [Validators.required]),
password: new FormControl(null, [Validators.required, Validators.minLength(6), GlobalValidator.numericRule, GlobalValidator.lowerCaseRule, GlobalValidator.upperCaseRule, GlobalValidator.nonAlpahuNericCaseRule]),
passwordConfirm: new FormControl(null, [Validators.required]),
}, GlobalValidator.compareValidator("password", "passwordConfirm"));
And here is complete Global Validator:
export class GlobalValidator
{
static mailFormat(control: FormControl)
{
const EMAIL_REGEXP = /^(([^<>()\[\]\\.,;:\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,}))$/;
if (control.value && !EMAIL_REGEXP.test(control.value))
{
return {
validateEmail: {
valid: false,
message: "Not valid email."
}
};
}
return null;
}
static numericRule(control: FormControl)
{
if (control.value && !(/\d/.test(control.value)))
{
return {
numericRule: {
valid: false,
message: "Numeric char missing."
}
};
}
return null;
}
static lowerCaseRule(control: FormControl)
{
if (control.value && !(/[a-z]/.test(control.value)))
{
return {
lowerCaseRule: {
valid: false,
message: "Lower case character missing."
}
};
}
return null;
}
static upperCaseRule(control: FormControl)
{
if (control.value && !(/[A-Z]/.test(control.value)))
{
return {
upperCaseRule: {
valid: false,
message: "Upper case character missing."
}
};
}
return null;
}
static nonAlpahuNericCaseRule(control: FormControl)
{
if (control.value && !(/[\W_]+/g.test(control.value)))
{
return {
nonAlpahuNericCaseRule: {
valid: false,
message: "Non-alphanumeric character missing."
}
};
}
return null;
}
static compareValidator(fc1: string, fc2: string)
{
return (group: FormGroup): { [key: string]: any } =>
{
if (group.value)
{
const password = group.value[fc1];
const passwordConfirm = group.value[fc2];
if (password !== passwordConfirm)
{
return {
compareFailed: {
valid: false,
message: "Password not match."
}
}
}
}
return null;
}
}
static conditional(conditional: (group: FormGroup) => boolean, validator)
{
return function (control)
{
revalidateOnChanges(control);
if (control && control._parent)
{
if (conditional(control._parent))
{
return validator(control);
}
}
};
}
}
function revalidateOnChanges(control): void
{
if (control && control._parent && !control._revalidateOnChanges)
{
control._revalidateOnChanges = true;
control._parent
.valueChanges
.distinctUntilChanged((a, b) =>
{
// These will always be plain objects coming from the form, do a simple comparison
if (a && !b || !a && b)
{
return false;
} else if (a && b && Object.keys(a).length !== Object.keys(b).length)
{
return false;
} else if (a && b)
{
for (let i in a)
{
if (a[i] !== b[i])
{
return false;
}
}
}
return true;
})
.subscribe(() =>
{
control.updateValueAndValidity();
});
}
}
这篇关于在angular 4上验证电子邮件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文