验证URL

Question

目前，我正在使用Angular5。我尝试按以下方式验证URL：

HTML：

<div class="form-group col-sm-6">
  <input formControlName="s_url" type="url" class="form-control" id="kk" placeholder="url">
  <error-display [displayError]="isValid('s_url')" errMsg="This field is required!"></error-display>
</div>

在validate.ts文件中，我有这种模式：

s_url: new FormControl('', [
  Validators.required,
  Validators.pattern("/^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/")
]),

但是使用该模式，即使键入正确的URL，也会显示错误消息。

Answer 1

您可以通过稍微修改和分隔正则表达式来尝试这种方式：

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

根据我自己的经验，当直接将引号（"）和斜杠（/）传递给正则表达式时，有时会导致正则表达式出现问题.pattern()

这是一个正在工作的演示

Answer 2

您还可以使用 URL API，在撰写本答案时该 API 的支持率为 95%。请参阅此处的浏览器支持

urlValidator: ValidatorFn = (control: AbstractControl) => {
    let validUrl = true;

    try {
      new URL(control.value)
    } catch {
      validUrl = false;
    }

    return validUrl ? null : { invalidUrl: true };
  }

  searchControl = this.fb.control(null, this.urlValidator);

Answer 3

例如，根据您的要求，如果您不想RegExp为 URL处理 \maintain a ，则可以将工作委托给浏览器的内置表单验证工具。

它可以这样实现：

const control: HTMLInputElement = document.createElement("input");
control.type = "url";
control.value = value;
const isValid: boolean = control.checkValidity();

Answer 4

我认为这个正则表达式更完整：

const urlRegex = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/;
this.form = this.fb.group({
      s_url: ['', [Validators.required, Validators.pattern(urlRegex)]],
    });

请在此处进行模式检查