😺

Angular のよく使う正規表現バリデーター

2022/12/11に公開

最近プロジェクトで Angular を利用しており、フォームのバリデーターとして正規表現を書く機会が多かったので、頻出なものをまとめてみました。

完成品

Angular の正規表現

validators.pattern に正規表現オブジェクトか文字列を渡すことで、正規表現を利用したバリデーションを実装できます。
今回は文字列ではなく正規表現オブジェクトを渡しました。VSCodeで色を付けてくれて見やすかったので。

なお、文字列を渡した場合、正規表現オブジェクトにあった文頭と文末を表す ^ と $ は不要になります。

JavaScript において、/ で囲ってあげると正規表現オブジェクトとして定義できます。
もしくは、new RegExp()とすることでも定義することができます。

電話番号に関してはこちらのサイトを参考にさせていただきました。

カタカナ系に関してはこちらを参考にさせていただきました。

ただ、半角カタカナの箇所に関しては、濁点、半濁点が含まれていなかったので、範囲を変更しています。