JavaScriptのtest関数と正規表現でバリデーションチェックを行う

最近JavaScriptでバリデーションをチェックを行ったのですが、今後も使いそうなので、よく使いそうなバリデーションチェックをまとめておきます。

test関数

test関数の使い方は簡単で、下記の形式でチェックするテキストを引数として渡してあげると、合致する場合はtrue、しない場合はfalseを返してくれます。

正規表現.test(チェックするテキスト)

引数として渡すのは、正規表現ではなくチェックするテキストなので、逆にしないように注意が必要です。

実際に使うときには正規表現とチェックするテキストは変数にして下記のようにします。

// 正規表現
let regex = /^\d*$/;
// チェックするテキスト
let str = 'sample';

// マッチしたときに処理を走らせる
if( regex.test(str) ){
  console.log('チェックする文字列と正規表現が一致');
}

!をつけて、マッチしないときにreturn falseで処理を終わらせるという使い方も多そうです。

if( !regex.test(str) ){
  return false
}

バリデーションチェックでよく使いそうな正規表現

バリデーションチェックでよく使いそうな正規表現をいくつかまとめました。

スニペットツールなどで保存して、すぐペーストできるようにしておくと便利です。

Webrandum

Alfred 4でスニペットを作成して使用する方法

https://webrandum.net/alfred4-snippets

自分はDashというスニペットアプリを使っていたり、Keyboard Maestroでスニペットを展開するマクロを作っていたりもしますが、Alfredでもスニペットの作成は可能です。使い分けが難しいのですが、今回はAlfredのスニペット機能についてまとめてみます。スニペット機能の使い方スニペット機能は［環境設定］→［Features］→［Viewer Hotkey］で設定したキーを入力してスニペットの画面を出します（デフォルトでは何も設定されていません）。もしクリップボードの設定で「Show "All Snippets" at top of Clipboard History」に...

Webrandum

Macユーザーにオススメのスニペットアプリ「Dash」でコードや定型文の管理を行う

https://webrandum.net/dash

HTMLやCSSなどのコードの入力で同じような入力を何度もしていませんか？そんな方にはスニペットツールがオススメです。スニペットツールを使えばよく使う定型文を簡単にペーストできるように登録したり、入力後のカーソル位置の指定や、クリップボード内のテキストと合わせてペーストしたりといった細かい指定ができます。今回は数あるスニペットアプリの中から「Dash」について基本的な機能を紹介します。ちなみに、自分の場合は日常会話などに使う定型文はAlfredのスニペット機能を使っていて、コードの定型文はDashを使うようにして...

メールアドレス

メールアドレスのexample@example.comの形式かどうかチェックしたい場合は、下記の正規表現を使います。

let regex = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}\.[A-Za-z0-9]{1,}$/;

数字のみ

数字のみをチェックしたい場合は、下記の正規表現を使います。

let regex = /^\d*$/;

電話番号

「000-0000-0000」のように、3桁・4桁・4桁のハイフン区切りの数字をチェックしたい場合は下記の正規表現を使います。
数字の桁数を変えたい場合は{}内の数字を変えて、ハイフンを変えたい場合は正規表現内の「-」を別の文字にすればOKです。

let regex = /^\d{3}-\d{4}-\d{4}$/;

半角英数字のみ

パスワードなどで半角英数字のみのチェックをしたい場合は、下記の正規表現を使います。

let regex = /^[0-9a-zA-Z]*$/