如何使用 Angular 5 验证网站地址

Question

我想验证角度 5 中的 url 不起作用。

<input type="url" name="url" id="url" ngModel pattern="https?://.+">
<div *ngIf="url.errors && (url.dirty || url.touched)" class="alert alert-danger">
<div [hidden]="!url.errors.pattern">
</div>
</div>

Answer 1

若要验证反应式表单中的 URL/Web 地址，您可以按照以下方法对表单控件使用Validators.pattern。

const urlRegex = '(https?://)?([\da-z.-]+)\.([a-z.]{2,6})[/\w .-]*/?';
this.hospitalForm = this.fb.group({
Website: ['', Validators.pattern(urlRegex)],
});

要验证模板驱动表单中的 URL/Web 地址，您应该创建自定义验证器指令，如下所示

@Directive({
selector: '[appPattern]',
providers: [{provide: NG_VALIDATORS, useExisting: PatternValidatorDirective, multi: true}]
})
export class PatternValidatorDirective implements Validator {
@Input('appPattern') pattern: string;
validate(control: AbstractControl): {[key: string]: any} | null {
return this.pattern ? this.patternValidator(new RegExp(this.pattern, 'i'))(control)
: null;
}
patternValidator(nameRe: RegExp): ValidatorFn {
return (control: AbstractControl): {[key: string]: any} | null => {
const regextest = nameRe.test(control.value);
return (!regextest) ? {'apppattern': {value: control.value}} : null;
};
}
}

在您的输入中，您应该将 appUrl 与正则表达式一起使用：

<input  type="url" name="url" id="url" ngModel appPattern="(https?://)?([\da-z.-]+)\.([a-z.]{2,6})[/\w .-]*/?">