prototypeに基づくjs検証フレームワークフォーム検証-I.組み込まれた検証ルールを使用

転載先
ローマ市場
validationフレームワークはprototype,script t.に基づいて非常に優雅にフォーム検証を実現している.aculo.us.
から
http://tetlaw.id.au/view/javascript/really-easy-field-validationダウンロードで、その使い方を簡単で詳細な例で説明します.
I.まずページヘッダにjsライブラリを導入する

    <script type='text/javascript' src='prototype.js'></script>
    <script type='text/javascript' src='validation.js'></script>
    <script type='text/javascript' src='effects.js'></script>

II. cssコードを追加

    <style>
    input.disabled {
        border: 1px solid #F2F2F2;
        background-color: #F2F2F2;
    }
    input.required, textarea.required {
        border: 1px solid #00A8E6;
    }
    input.validation-failed, textarea.validation-failed {
        border: 1px solid #FF3300;
        color : #FF3300;
    }
    input.validation-passed, textarea.validation-passed {
        border: 1px solid #00CC00;
        color : #000;
    }

    .validation-advice {
        margin: 5px 0;
        padding: 5px;
        background-color: #FF3300;
        color : #FFF;
        font-weight: bold;
    }
    </style>

III.HTMLコード

    <form id="test" action="#" >
       <table border="1px">
       <tr>
          <td class = "label">Username</td>
          <td><input type="text" name="username" id = "username" class="required"></td>
       </tr>
       <tr>
          <td class = "label">Telephone Number</td>
          <td><input type="text" name="telephoneNumber" class="required validate-alphanum" id = "telephoneNumber"></td>
       </tr>
       <tr>
          <td colspan = "2" align = "center">
          <button class = "submit" id = "search">Search</button>
          </td>
       </tr>
       <table>
    </form>
    <script>
       var valid = new Validation('test', {immediate : true});
    </script>

このページを実行すると、usernameが文字を入力しない場合やtelephonumberが数字やアルファベットではない場合はsearchボタンをクリックすると、エラーメッセージが表示されます.

class=「required validate-alphanum」は、validation内に構築された検証ルールの名前です.new Validation('test',{immediate:true})を実行すると、Fieldがフォーカスを失ったり、フォームのコミット動作を実行したりすると、フォームの下にあるすべての組み込みクラスの検証名の検証ルールがトリガーされます.