Javascript 値検証機能の使用方法。
  1. Java の Fn<ValidatorContext, Boolean> のコンポジットツリーのルート要素を Visitor に作用させて Javascript のコンストラクタツリーの文字列を得ます。
    final Fn<ValidatorContext, Boolean, RuntimeException> validatorFn = null/* ... */;
    final StringBuilder sb = new StringBuilder();
    final Visitor<StringBuilder, RuntimeException> visitor = new Visitor<StringBuilder, RuntimeException>();
    visitor.setMap(VisitorAppUtils.JS);
    visitor.setSubContext(sb);
    visitor.visit(validatorFn);
    System.out.println(sb.toString());
  2. 取得した Javascript コンストラクタツリーを js ファイル(例は validator_sample.js)の変数宣言にペーストします。
    var validator_tree = (取得した Javascript コンストラクタツリー);
  3. 値を検証して結果を出力する共通の Javascript 関数を js ファイル(例は validator_sample.js)に作成します。 値検証結果のメッセージを変換/加工したり値検証結果を表示する位置を制御したりするにはこのサンプルを変更してください。
    function checkAndAlert(form){
      // acition を id に変換する。
      var id = form.getAttribute("action");
      id = id.replace("(.+)\\.[^\\.]+", "$1");
      
      var context = new ValidatorContext();
      context.collectable = new SimpleMessageCollector();
      context.id = id;
      // フォームの入力値集合を本フレームワークの入力値集合の構造に変換する。
      context.inputMap = convertFormToListMap(form);
      // 値検証を実行する。
      var flag = validator_tree.exec(context);
      if(!flag){
        // 値検証結果が false の場合はメッセージ一覧の加工して操作者に表示する。
        var sb = "";
        for(var i in context.collectable.messageList){
          sb = sb + "\n" + context.collectable.messageList[i];
        }
        alert(sb);
      }
      // 値検証結果を返す。
      return flag;
    }
  4. 各フォームにアクションイベントを登録する Javascript を HTML ページに作成します。
    <!-- 値検証のコアファイルを読み込む -->
    <script src="validator_core.js"></script>
    <!-- 上で作成した js ファイルを読み込む -->
    <script src="validator_sample.js"></script>
    <!-- サブミット時に値検証/結果出力処理を呼び出す -->
    <script>
    window.onload = function(){
      window.document.form0.onsubmit = function(){
        return checkAndAlert(window.document.form0);
      };
    };
    </script>
トップに戻る
Copyright (C) 2006 Takahiro Nakamura. All rights reserved.