IISにOSSをインストールするための情報サイト [IIS de OSS 64bit]

IIS de OSS 64bit > 調査室 > JavaScriptサンプル

JavaScriptサンプル

▼目次

Webサイトへメールアドレスを載せる

HTML上に直にメールアドレスを記載すると、スパムロボットに拾われてしまい、たくさんの迷惑メールが届くようになってしまう。

メールアドレスを取得する形式のロボットの動きは、おそらく単純で、URLからHTMLを取得後、@の入った文字列を収集しているのだろうと思われる。(<a href="mailto:****">で拾っているかもしれないが・・・)

そこで、このメールアドレスの表示をHTMLへのべた書きではなく、javascriptの文字列連結で表示させるように工夫してみよう。

ここでは、HTMLにて ”お問い合わせは boo@example.com まで。"のような表示をさせてみよう。 まず、head タグ内に以下の記述をする。

<meta http-equiv="content-script-type" content="text/javascript" />
<script type="text/javascript">
<!--
    function setMailAddress(name, domain) {
    document.getElementById("mail").innerHTML = name + '@' + domain;
    }
// -->
</script>

続いてBODYタグに onLoad属性を付ける

<body onLoad="javascript:setMailAddress('boo','example.com');">

最後にBODY内部のメールアドレスを表示させたい場所に以下のコードを埋める

お問い合わせは <span id="mail"></span> まで。

exValidationで作ったフォームからmailtoを有効化させる

exValidationは、通常のPOSTやajax経由のポストを前提としており、私がやった限りでは、FORMのMAILTOに対応していない。
そこで、「customClearError」の実装でわざとjavascriptエラーを起こしてjavascriptを無効化し、通常のFORMの動作を有効にさせる方法をとってみる。
↓こんな感じ

customClearError: function() {
 document.getElementById("_raise_error_").innerHTML = "";
}

↓Javascript全体の実装例

$(function(){
 $("form")
  .exValidation({
   rules: {
    name: "chkrequired chkzenkaku chkgroup",
    email: "chkrequired chkhankaku chkgroup"
   },
   errInsertPos: 'after',
   errPosition: 'fixed',
   customAddError: function() {
    if ( $("#alert").length<1 ) {
     $("p.attention").before("<div id=\"alert\"><strong>未記入項目があります。</strong></div>");
    }
   },
   customClearError: function() {
    $("#alert").remove();
    document.getElementById("_raise_error_").innerHTML = "";
   },
   customScrollAdjust: function() {
    return $("#alert").offset().top;
   }
  });
});

#「_raise_error_」というidがHTML上に存在しないため、該当ファンクション動作時にjavascriptエラーとなり、処理が止まる
↓HTML部の実装例

<form method="post" action="mailto:tarou@example.com?Subject=test">
  <table>
    <tr>
      <th>お名前<span>*</span></th>
      <td>姓<span id="name"><input type="text" id="name1" name="email" value="" />
      名<input type="text" name="neme2" value="" /></span></td>
    </tr>
    <tr>
      <th>メールアドレス<span>*</span></th>
      <td><span id="email"><input type="text" id="email1" name="email1" value="" />
      @<input type="text" name="email2" value="" /></span></td>
    </tr>
  </table>
  <p class="submit">
    <input name="送信" type="submit" class="button" value="送信" />
  </p>
</form>

#「送信」クリック時、全てのチェックが終わった後でjavascriptの動作が途中で停止する。

#そしてexValidatorが無効になり、HTMLのactionが動作する。

コメント

  • aa -- aa 2013-06-04 (火) 14:06:02

トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ
Last-modified: 2013-06-04 (火) 14:06:02 (1990d)