在angular 4上验证电子邮件 [英] validate email on angular 4

问题描述

我是角4中的反应形式的新手.如何在电子邮件中放入模式验证?我对 https://angular.io/api/forms/EmailValidator

app.component.html 模式

解决方案

如果您需要邮件验证程序，则可以使用我的代码:

 导出类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屋！