入力された値がスペースまたは空欄のときにalertを出す! Javascriptの勉強

前回。.val()で値がnullのときまたは空欄のときにalertを出す! jQueryの勉強 という記事を書きましたが、スペースが入力された時もアラートを出したいなと思いサンプルコードを作成してみました。

入力された値がスペースまたは空欄のときにalertを出す方法

正規表現を使う

inputタグ内の値が、空欄やnull、スペースの時にalertを画面に表示します。はじめに空欄かnullかを判定し、違ければスペースかどうか判定しています。

let inputValue = $('input[name="inputValue"]').val();

if (inputValue == null || inputValue == "") {
    alert("何か入力してね");
} else if (inputValue.match(/^[  \r\n\t]*$/)) {
    alert("スペース以外で何か入力してね");
}

match()のカッコ内にはスペースを現す正規表現が入っています。

上記だとわかりづらいのでHTMLを含めたものをcodepenで作成しました。

See the Pen スペースの入力時にアラートを出すjavascript by Nakamoto (@programmerlife) on CodePen.

スペースが全角でも半角でも複数でもalertを出すことが可能です。

トリムを使う

正規表現は難しいなと感じたので、他の方法を探してみました。

以下のようにtrimをし入力された値からスペースを消します。消したことにより空欄と同じ扱いになります。

value.trim() === ""

こちらも上記だけだとわかりづらいのでHTMLを含めたものをcodepenで作成しました。

See the Pen スペースの入力時にアラートを出すjavascript (trim) by Nakamoto (@programmerlife) on CodePen.

同じくスペースが全角でも半角でも複数でもalertを出すことが可能です。こちらのほうがコードもシンプルでわかりやすいかもしれません。

おわり

正規表現は便利だけどなかなか自力では作れない。なるべく使おうとは思うけれど、今回はtrim()のほうが良さそうですかね。

参考

https://techmemo.biz/javascript/form-spaceonly-denial/

https://stackoverflow.com/questions/36323593/javascript-alert-when-space-or-no-entered-value