#pgid
 
 ** あらまし [#oacea7cb]
 このページは、masuidrive.jpで提供されている「Realtime validation using Ajax」を利用して自動入力チェックをさせていたが、Validator.register関数の設定をどうしたものか…と思って試行錯誤したときのメモです。
 
 ** Realtime validation using Ajaxとは [#n6a0d603]
 - [[Realtime validation using Ajax:http://blog.masuidrive.jp/articles/2006/01/05/validation]]を参照ください
 
 -- 公式のサンプルは↓こちら
 http://masuidrive.jp/validation/
 
 ** 自分で作ったサンプル [#hc13ca70]
 *** 失敗事例: 同じclassがあっても最初の1個しか実行されない [#d0d45373]
 - サンプルは↓こちら
 http://okra.ark-web.jp/~takemura/public/js/adobe_air/form_sample_for_web_use_realtime_validation_using_ajax.html
 
 #blikimore
 
 - このようにValidator.register関数を設定してました
  var validates_ok    = '<img src="images/icon_accept.gif" width="27" height="16" style="vertical-align: middle"/>';
  var validates_error = '<img src="images/icon_stop.gif" width="27" height="16" style="vertical-align: middle"/>';
  var validates_info  = '<img src="images/icon_info.png" width="27" height="16" style="vertical-align: middle"/>';
  
  Validator.register({
    "#mail" : {
      "/^([^@\\s]+)@((?:[-a-z0-9]+\\.)+[a-z]{2,})$/": "OK",
      "/^$/": validates_info+"必ず入力してください",
      "/.*/": validates_error+"正しいメールアドレスを入力してください" 
    },
    ".validate_necessary" : {
      "/^$/": validates_info+"必ず入力してください",
      "/.*/": validates_ok
      },
    ".validate_kana" : {
      "/[^ぁ-ん゛゜ー  ]/": validates_error+"ひらがな以外は入力できません",
      "/.*/": validates_ok
    },
     ".validate_number" : {
      "/^[0-9|\-]+$/": validates_ok,
      "/.*/": validates_info+"数字かハイフンで入力してください"
    }
  });
 
 - HTMLは↓このようにしていました
  <li>お名前 :<input type="text" name="name" id="name" class="validate_necessary" /><span id="name_msg"></span></li>
  <li>ふりがな:<input type="text" name="kana" id="kana" class="validate_kana" /><span id="kana_msg"></span></li>
  <li>郵便番号:<input type="text" name="zip" id="zip" class="validate_number" /><span id="zip_msg"></span></li>
  <li>ご住所 :<input type="text" name="address" id="address" /><span id="address_msg"></span></li>
  <li>電話番号:<input type="text" name="tel" id="tel" class="validate_number" /><span id="tel_msg"></span></li>
  <li>メールアドレス:<input type="text" name="mail" id="mail" /><span id="mail_msg"></span></li>
 
 サンプルを実行してみると分かるように、COLOR(red):電話番号の『validate_number』が効いてません!
 また、ふりがなを必須にしたいのですが、COLOR(red):既にvalidate_kanaがあるのでvalidate_necessaryを実行できません!
 
 
 *** 結局1要素ずつ宣言しなきゃダメ [#v0f7c311]
 いまのところの結論としては、1要素ずつ宣言しないとダメなのかな、と思います。
 
 - サンプルは↓こちら
 http://okra.ark-web.jp/~takemura/public/js/adobe_air/form_sample_for_web.html
 
 
 - Validator.registerの宣言は↓こちら
  Validator.register({
    "#name" : {
      "/ $/": validates_info+"必ず入力してください",
      "/.*/": validates_ok
    },
    "#kana" : {
      "/[ ぁ-ん゛゜ー  ]/": validates_error+"ひらがな以外は入力できません",
      "/ $/": validates_info+"必ず入力してください",
      "/.*/": validates_ok
    },
    "#zip" : {
      "/[ 0-9|\-]/": validates_error+"数字かハイフンで入力してください",
      "/ $/": validates_info+"数字かハイフンで入力してください",
      "/.*/": validates_ok
    },
    "#address" : {
      "/ $/": validates_info+"必ず入力してください",
      "/.*/": validates_ok
    },
    "#tel" : {
      "/[ 0-9|\-]/": validates_error+"数字かハイフンで入力してください",
      "/ $/": validates_info+"数字かハイフンで入力してください",
      "/.*/": validates_ok
    },
    "#mail" : {
      "/ ([ @\\s]+)@((?:[-a-z0-9]+\\.)+[a-z]{2,})$/": validates_ok,
      "/ $/": validates_info+"必ず入力してください",
      "/.*/": validates_error+"正しいメールアドレスを入力してください"
    }
   });
  
 - HTMLは↓こちら
  <li>お名前 :<input type="text" name="name" id="name" /><span id="name_msg"></span></li>
  <li>ふりがな:<input type="text" name="kana" id="kana" /><span id="kana_msg"></span></li>
  <li>郵便番号:<input type="text" name="zip" id="zip" /><span id="zip_msg"></span></li>
  <li>ご住所 :<input type="text" name="address" id="address" /><span id="address_msg"></span></li>
  <li>電話番号:<input type="text" name="tel" id="tel" /><span id="tel_msg"></span></li>
  <li>メールアドレス:<input type="text" name="mail" id="mail" /><span id="mail_msg"></span></li>
 
 
 ** 自作関数の結果を返すようにもできるみたい [#f6d61468]
 Validator.register関数の設定には、正規表現を評価してメッセージを表示する方法の他に関数を実行して評価させることもできるらしい
 
 - 例えば、↓このようにできる
  Validator.register({
    "#name" : check_name,
    (...)
  });
  function check_name(el) {
    if (el.value == 'hoge') {
      return validates_info+'それは良い名前ですね!';
    }
    return validates_ok;
  }
 
 -- 「お名前」に「hoge」と入れた場合のみ「それは良い名前ですね!」と言われるようにできます。
 
 
 ** 未だできていないこと [#tf3739b5]
 *** 文字数チェック [#u015df55]
 - 実は、入力チェックに「文字数チェック」を入れてみようかと思ってコードを覗いて見たら、上記の自作関数の指定方法を知りました^^
 - でも、正規表現でのチェックと自作関数でのチェックを一緒には実行できないので、イマイチです…
 -- それでも、「文字数チェック」だけ実行するなら↓こんな感じ?
  Validator.register({
    "#name" : check_length,
    (...)
  });
  function check_length(el) {
    if (el.value.length > 50) {
      return validates_error+'入力は50文字まで!';
    }
    return validates_ok;
  }
 
 --- ちなみに、check_lengthの引数 el.value にユーザが入力した値が入ってます
 
 #blikifooter(竹村)
 
 tag: [[JavaScript>tag/JavaScript]], [[入力チェック>tag/入力チェック]]
 

トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

アークウェブのサービスやソリューションはこちら