入力確認処理などは条件分岐のネストが深いのと条件分岐が浅く長く続くのどっちがマシか

Question

次のJavascrpitは自分がHTMLで構成された入力フォームの空欄チェックのソースコードなのですが、個人的にネストが深すぎて気になっておりますし、縦にも長くて気になります。

function isNotInputEmpty(){
/*
 * 空欄があった場合はアラートを表示する。
 */
        var empty_string = ''
        for each(var element in document.input_form){
        if('text' == element.type && '' == element.value){
        switch(element.name){
            case 'name':
                empty_string += '「お名前」の欄が入力されていません。';
                break;
            case 'name_kana':
                empty_string += '「カタカナ」の欄が入力されていません。';
                break;
            case 'mail':
                empty_string += '「メールアドレス」の欄が入力されていません。';
                break;
            case 'tel':
                empty_string += '「電話番号」の欄が入力されていません。';
                break;
            case 'postcode':
                empty_string += '「郵便番号」の欄が入力されていません。';
                break;
            case 'state':
                empty_string += '「都道府県」の欄が入力されていません。';
                break;
            case 'city':
                empty_string += '「市区町村」の欄が入力されていません。';
                break;
            case 'addr':
                empty_string += '「市区町村」の欄が入力されていません。';
                break;
            }

            if(0 > empty_string.length && ('addr' != element.name || 'member_num' != element.name){
                enpty_string += '\n';
            }
        }
        if(0 > empty_string.length){
            alert(empty_string);
            return false;
        } else {
      return true;
      }
  }
}

自分なりには
「後から変更があったとしてもコードの編集する量を最小限に抑えれないか」
と考えてこのコードを書きましたが、これとあと1つ処理の順序を変えることが可能だと思いまして、一つ目は

1. textエレメントをswitchで判別する
2. caseの中でif空欄判定をする
3. 空欄であればエラーメッセージを入れる

この処理だとテキストエレメントを取得するときのfor eachが省けて良いと思ったのですが、先に書いたとおり
「後から変更があったとしてもコードの編集する量を最小限に抑えれないか」
という個人的な観点からするとこのコードが一番なのかなと思っているのですが……。

ここで質問です。
Webのフォームに限らず、入力フォームの入力確認処理では似たような処理を書くと思いますが、皆さんはどのように書きますでしょうか、またそのように書いた理由も教えていただけると幸いです。言語は問いません。

P.S.
このソースコードはまだ実行していないため、そもそも動かないかもしれません。その部分のご指摘でも構いません。

Answer 1

自分だったらこうしますかね。
チェックすべき項目をオブジェクトにまとめて、
項目が増えてもそこだけ追加してロジック部分は1行も弄らないで済むようにします。
(動作未確認です)

function isNotInputEmpty(){

/*
 * 空欄があった場合はアラートを表示する。
 */
  var valid_empty = {
      'name':'お名前',
      'name_kana':'カタカナ',
      'mail':'メールアドレス',
      'tel':'電話番号',
      'postcode':'郵便番号',
      'state':'都道府県',
      'city':'市区町村'
  };

  var empty_string = ''
  for each(var element in document.input_form){
    if('text' == element.type && '' == element.value && valid_empty[element.name] !== undefined){
      empty_string += '「'+valid_empty[element.name]+'」の欄が入力されていません。\n';
    }
  }

  if(0 > empty_string.length){
    alert(empty_string);
    return false;
  } else {
    return true;
  }
}

Comments

[manzyun]

FormをJavascriptで動的に作ってしまうのですね。ここまでは頭が働きませんでした。

Answer 2

html を書くときに
<span id="label_1">名前</span><input id="field_1" ...></input>
のような規則をもうける事にするとよいです。
そのようにおけば、HTML の dom を input 要素をさがすと、その input に付随した 画面上のラベルを得る事ができるようになります。
そして input が未入力なときのエラーメッセージの生成にそのラベルを使うようにできるはずです。

このようにしていけば、HTML 上のラベル変更に追従して、エラーメッセージも変化します。

ちなみに rails の Form 生成のツールには、このような仕組みで動作しているものがあります。

Comments

[manzyun]

そういえばこのコードを書き加えるHTMLのFormを見ていて違和感があったのは、labelタグがなかったからかもしれません。
確かにこの方法がスマートでJavascriptの得意とするところを存分に活かしているように思いました。

Answer 3

本筋と関係ないですが、

if(0 > empty_string.length

empty_string.length が負になることはないのでは？

変数を定数と比較するときは、普通は「変数 関係演算子 定数」と書きます。主語→述語の順というか。
それを逆にしたから、こういう間違いが生じたのだと思います。

Comments

[manzyun]

本当ですね……。

昔所属していたところでのコード規約を意識していると、こういうミスが多いので、
やはり自然体で書いたほうがいいのかもしれません。

（コード規約の理由としては ```if (hoge == 0) ```と書いたつもりが ```if(hoge = 0```と書いてしまい、hogeに代入されてしまうというトラブルを減らすためだそうです）