我对角4中的反应形式有所了解。 我如何在电子邮件中进行模式验证? 我对https://angular.io/api/forms/EmailValidator
感到困惑答案 0 :(得分:1)
如果您需要邮件验证器,可以使用我的代码:
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 ...
}
当设置形式:
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"));
这是完整的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();
});
}
}
答案 1 :(得分:0)