web-dev-qa-db-ja.com

URLを検証する

現在、私はAngular 5.を使用しています。次のように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が入力された場合でもエラーメッセージが表示されます。

angularformstypescript
6
Animay

正規表現をわずかに変更して分離することで、この方法を試すことができます。

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

私自身の経験から、引用符（_"_）とスラッシュ（_/_）は、.pattern()に直接渡されたときに正規表現に問題を引き起こすことがあります。

動作する Demo

13
Michael Doye

たとえば、URLの\ _a RegExpを管理したくない場合は、要件に応じて、ブラウザの組み込みフォーム検証機能に作業を委任できます。

次のように実装できます。

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

この簡単なアプローチを使用してください。

このライブラリをインストールします。

npm install ng2-validation --save

これを注入することを忘れないでください。 app.module.tsでこれをインポート配列にインポートします

import { CustomFormsModule } from 'ng2-validation'

そして、インポート配列で、

imports: [BrowserModule, FormsModule, CustomFormsModule],

次に、以下のようにコードを変更します

<div class="form-group col-sm-6">
  <input formControlName="s_url" type="url" class="form-control" id="kk" url placeholder="url">

  <div *ngIf="imageUrl.touched && imageUrl.invalid" >
     <div *ngIf="imageUrl.errors.required"> This field is required!</div>
     <div *ngIf="imageUrl.errors.url"> invalid URL </div>
  </div>

</div>
0
Ilthizam Imtiyas