あのBBCが作った超実力派JavaScriptライブラリ"Glow"を徹底解剖する

glow.events

イベント操作に関するメソッドが用意されている。

addListener … イベントリスナを登録
fire … 指定したオブジェクトに対して特定のイベントを発生させる
removeAllListeners … 指定したエレメントからすべてのイベントリスナを削除する
removeListener … addListenerで登録したイベントリスナを削除する

glow.forms

HTMLフォームに入力されたデータのバリデートにあたり、有用なクラスが用意されている。

Form … バリデートテストするためのオブジェクトを生成する
ValidateResult … バリデート実行後の結果(errorCount, eventName, fields)にアクセスするためのクラス

サンプルコードは次のとおり。

form.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
    <head>
        <title>Hello, Glow! / glow.forms.Form</title>
        <script type="text/javascript" src="./glow/1.5.1/core/core.js"></script>
        <script type="text/javascript">
        <!--
        glow.ready
        (
           function()
           {
               var myFirstForm = new glow.forms.Form("#registUserForm");
               myFirstForm.addTests
               (
                   'name',  // ユーザ名
                   [
                       'required', // required: 入力必須
                       {
                           message: 'ユーザ名はかならず入力してください'
                       }
                   ]
               ).
               addTests
               (
                   'mail',  // メールアドレス
                   [
                       'required', // required: 入力必須
                       {
                           message: 'メールアドレスはかならず入力してください'
                       }
                   ],
                   [
                       'isEmail', // isEmail: メールアドレスのフォーマットであること
                       {
                           message: '不正な形式のメールアドレスです'
                       }
                   ]
               ).
               addTests
               (
                   'age',  // 年齢
                   [
                       'required', // required: 入力必須
                       {
                           message: '年齢はかならず入力してください'
                       }
                   ],
                   [
                       'isNumber', // isNumber: 数値であること
                       {
                           message: '年齢は半角数値で入力してください'
                       }
                   ]
               );
           }
        );
        -->
        </script>
    </head>

    <body>
        <h1>ユーザ登録</h1>
        <form id="registUserForm">
            <table>
                <tr>
                    <th>氏名</th>
                    <td><input type="text" name="name"></td>
                </tr>
                <tr>
                    <th>メールアドレス</th>
                    <td><input type="text" name="mail"></td>
                </tr>
                <tr>
                    <th>年齢</th>
                    <td><input type="text" name="age"></td>
                </tr>
            </table>
            <input type="submit" value="submit">
        </form>
    </body>
</html>

フォームはユーザの登録画面を意識している。全フィールド入力必須、メールアドレスは正しいメールアドレス形式であること、年齢は数値であることをチェックしている。Webブラウザで動作を確認しよう。


フォームのサブミット時にあらかじめ設定したバリデートをおこなう。設定できるバリデートの種類はglow.forms.testsを参照されたい