V.S.A. III

HTML と Javascript の分離(2)

こんにちは，五十嵐です．先日はリストの折りたたみという，ある意味特殊な設定での HTML と javascript の分離について考えたのですが，もっと身近に form と javascript の関係がありました．

Web アプリケーションを書いたことが無いので，いろいろと実験しています．

こんな感じでやっていいます．とりあえず，スタイルシートの勉強にはなりました．

form の入力チェックをするために，javascript とは切っても切れません．もちろん，javascript を off にしている場合も考慮して，フォームが送信された場合にはサーバサイドでももう一度入力内容のチェックをしなければならないわけですが．．．

例えば，こんな入力フォームの場合．

form の action は，サーバサイドへの URL ですので仕方が無いとして，onSubmit のようなものを form の中に書き込むことに私はどうしても抵抗があります．そうなると，DOM を利用して javascript 側で設定をするということになるのです．

<form method="POST" 
action="/modules/weblog/index.php?user_id=6" id="emailchecktest" 
name="emailchecktest">
e-Mail: 
<input type="text" name="email" size="15" id="useremail"> 
/ 
ステータス: <span id="emailcheckstatus"></span><br />
<input type="submit" value="登録"><input type="reset" value="クリア">
</form>

<script type="text/javascript">
<!-- 
function _getObjectById( id ){
  var elem;
  if( document.getElementById ){
    elem = document.getElementById( id );
  }else if( document.all ){
    elem = document.all( id );
  }
  return elem;
}

var ECS = _getObjectById( "emailcheckstatus" );
document.emailchecktest.email.onkeyup = function(){
  ECS.style.color = "#ff0000";
  if( this.value == "" ){
    ECS.innerHTML = "Email アドレスを入力してください．";
  }else if( !this.value.match(/^[a-zA-Z]+.*@[^@.]+\.[^@.]+/) ){
    ECS.innerHTML = "Email の形式が正しくありません．";
  }else{
    ECS.innerHTML = "";
  }
}

document.emailchecktest.onsubmit = function() {
  alert( "本来はここで入力内容の確認をします" );
  return false;
}
// -->
</script>

このやり方が一般的なのかどうか，自信がもてないのですが．．．

最終的には，javascript は js ファイルのようなものに全部押し込んで読み込むようにして，HTML 側には javascript そのものは見えないような形がきれいなのかなぁと思っています．

カテゴリ：開発日記

<< Linux IPv6 に脆弱性 | Main | No tables found in database 回避編 >>

いかちょー (2007-03-15 22:36) | コメント(0)| トラックバック(0)

トラックバック(0)

トラックバックURL: