JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで値が空かどうかを確認する方法

JavaScriptでは、空文字列（""）と null を使った条件式で、値が空かどうかを簡単にチェックできます。たとえば、ユーザーがテキストボックスに入力せずにフォームを送信しようとした場合に、警告メッセージを表示して送信を防ぐことができます。

サンプルコード

以下は、フォーム送信時に入力値が空でないかを検証する完全なHTMLの例です。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<form name="register" onsubmit="return checkingUserName()">
USERNAME: <input type="text" name="username">
<input type="submit" value="Save">
</form>
<script>
    function checkingUserName() {
        var username = document.forms["register"]["username"].value;
        if (username == null || username == "") {
            alert("Please enter> the username. Can’t be blank or empty !!!");
            return false;
        }
    }
</script>
</body>
</html>

コードのポイント

このサンプルでは、フォームの onsubmit イベントで checkingUserName() 関数を呼び出しています。関数内では、document.forms["register"]["username"].value によって入力値を取得し、username == null || username == "" の条件で値が null または空文字列であるかを判定しています。条件に該当する場合は alert() でメッセージを表示し、false を返すことでフォームの送信をキャンセルします。

プログラムの実行方法

上記のコードを「anyName.html」（index.html）などのファイル名で保存し、ファイルを右クリックしてください。VS Codeエディターを使用している場合は、「Open with Live Server」を選択するとブラウザーでプログラムを実行できます。

出力結果

プログラムを実行すると、次のような画面が表示されます。

JavaScriptで値が空かどうかを確認する方法

テキストボックスを空のまま「Save」ボタンをクリックすると、以下のようにメッセージ付きのアラートが表示されます。

JavaScriptで値が空かどうかを確認する方法

  1. JavaScriptでボタンをクリックしたらテキストフィールドを空にする方法

    Web開発では、ボタンをクリックしたタイミングでテキストフィールド（テキストボックス）の中身を空にしたいケースがよくあります。たとえば、検索条件のリセットやフォーム入力内容の初期化などが代表例です。この記事では、JavaScriptを使ってこの処理をシンプルに実現する方法を解説します。 基本の考え方 実装に必要なのは、次の2つのステップだけです。 HTML側でonclick属性を使い、ボタンクリック時に呼び出すJavaScriptの関数を指定する 関数内でdocument.getElementById()によって対象の要素を取得し、そのvalueプロパティに空文字列（）を代入する docu

  2. JavaScriptでテキストボックスの入力値を取得して表示する方法

    JavaScriptでは、valueプロパティを使ってテキストボックスに入力された値を取得し、innerHTMLを使うことでその値を段落（<p>要素）に表示することができます。この仕組みは、フォームの入力内容をリアルタイムに画面へ反映させたい場合などによく使われる基本的なテクニックです。 コード例 以下が実際のサンプルコードです。 <!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">