😺

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

2022/12/11に公開約800字

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

完成品

Angular の正規表現

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

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

https://angular.jp/api/forms/Validators#pattern

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

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions

感想

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

https://rapicro.com/電話番号の正規表現は?/

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

https://www.javadrive.jp/regex-basic/sample/index8.html#section3

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

GitHubで編集を提案

Discussion

ログインするとコメントできます