angular表单自定义校验验证

最新推荐文章于 2024-10-18 12:27:51 发布

柴智霖

最新推荐文章于 2024-10-18 12:27:51 发布

阅读量2.7k

点赞数

分类专栏： angular 前端文章标签：表单校验验证同步异步

本文链接：https://blog.youkuaiyun.com/fdsjiaoDoctor/article/details/89949516

版权

前端同时被 2 个专栏收录

23 篇文章

订阅专栏

angular

11 篇文章

订阅专栏

本文介绍了如何在Angular中实现表单的自定义验证，包括同步和异步验证规则的设置，以登录密码验证为例详细阐述了验证方法的编写和使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在formConfig的每个key对应的value中的验证方法部分填写验证规则代码，也可抽象成方法

以登录密码验证为例：

const _config = {
    id: [, , , {label: '', class: 'col-md-12 col-lg-12', hidden: true, type: 'static'}],
    code: [, , , {label: '员工编号', class: 'col-md-12 col-lg-12', type: 'static'}],
    name: [, , , {label: '员工姓名', class: 'col-md-12 col-lg-12', type: 'static'}],
    loginName: [, [Validators.required, Validators.maxLength(32)], , {
        label: '登录名',
        requiredError: '登录标识由6位以上字母、数字组成，可使用电子邮件地址',
        class: 'col-md-12 col-lg-12',
    }],
    bPassword: [, [Validators.required, Validators.minLength(8), this.confirmBPassword(), this.validPassWord()], , {
        label: '新密码',
        requiredError: '登录密码由6位以上字母、数字组成',
        type: 'password',
        class: 'col-md-12 col-lg-12',
    }],
    cPassword: [, [Validators.required, Validators.minLength(8), this.confirmCPassword(), this.validPassWord()], , {
        label: '确认密码',
        requiredError: '登录密码由6位以上字母、数字组成',
        type: 'password',
        class: 'col-md-12 col-lg-12',
    }]
};

confirmCPassword(): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } => {
        return this.password !== control.value ? {'customValid': {error: '两次输入密码不一致'}} : null;
    };
}

confirmBPassword(): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } => {
        this.password = control.value;
        return null;
    };
}

validPassWord(): ValidatorFn {
    return (control: AbstractControl): {[key: string]: any} => {
        let result= /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]$/.test(control.value);
        return result ? null : {'customValid': {error: '密码格式为字母大小写加数字'}};
    };
}