コンテンツにスキップ

Top

JavaScript で 入力文字 が使用可能文字をつかっているかチェック

パスワードなど、使用してよい文字が決まっている場合、入力時にチェックして警告メッセージを出したりダイアログを出したりすると親切。

でもいちいち文字チェックするの面倒なので簡単にできないか調べたら、日本語とかの2バイト文字は知らんけど、アルファベット、数字、記号であれば正規表現で簡単にチェックできることが分かった。

正規表現とtest関数

正規表現の文字列に.test()をつけるだけでチェックができるという便利機能をJavaScriptは実装してくれているのでそれを用いる。

アルファベットのA-Z、a-z、数字の0-9、記号の-(ハイフン)、_(アンダースコア)、.(ピリオド)しか使ってはいけない、という時に、以下のような正規表現の文字列をまず作成する。

const regex = /^[a-zA-Z0-9\-\_\.]$/;
(バックスラッシュはいわゆる¥マークね。記号をエスケープするためにつけてる)
文字列といっても本当に文字列なわけじゃないので""でくくったりしてはいけない。

んで、testという関数が用意されているので、

regex.test('hoge');
を実行してみると、trueが返却される。
同様に、
regex.test('hoge#');
とすると#は許可していないので、 false が返却される。

簡単!

文字列長のチェック

パスワードとかだと8文字以上とか文字数に制限がある場合が多い。
lengthでチェックすればいいだけだが、上記のように正規表現を使う場合は、〇文字以上〇文字以下は簡単にセットできるので使ったほうが楽。
以下のように、

const regex = /^[a-zA-Z0-9\-\_\.]${6,24}/;
を追加するだけ。
これで6文字以上24文字以下じゃないとtest時にfalseを返すようになる。

便利!

以上。