✍️

【JavaScript】RegExpを使ってバリデーションテストを書こう

2022/09/25に公開

バリデーションを書くとき、HTMLの属性を使うか、JavaScriptのRegExpを使うか迷いますよね。
以前に比べ、便利なフォーム機能をもったUIコンポーネントがあったりと簡単に実装できるようになりました。
・・・僕もMaterial Uiのフォーム機能にはお世話になっています。

今回は、JavaScriptを使ってバリデーション機能を持たせる方法について書きたいと思います。

const validation = (value) => { 
	if (! new RegExp(パターン).test(value)) {
		return "エラー発生!";
	}else {
	
	}
}

これは簡潔に、バリデーション部分を書いた例ですが、
まず、valueの値をRegExpのパターンと比較します。一致しない場合は、”エラー発生”の文字列を返す処理を施しました。

これによってバリデーション処理を簡単に実装できました。

Discussion