Browse By

JavaScriptでリアルタイムバリデーションを実装する その1Model(モデル)の実装

Pocket

JavaScriptでリアルタイムバリデーションを実装する その1Model(モデル)の実装

ブレイクスルーJavaScriptのChapter-01を参考にリアルタイムで入力チェックしてくれるフォームを実装してみます。この書籍は解説がシンプルでわかりやすく、中級者を目指すJavaScript初級者におすすめです。

Modelの属性に値を追加する

まずはModelを作成していきます。Modelの役割は以下の2つです。

  • Viewから値を受け取って、その値に対してバリデーションを実行する
  • バリデーションの結果に応じてイベントを通知する

まずはModelのコンストラクタを作成します。

function AppModel(attrs){
    this.val = "";
}

次に前回とりあげたオブザーバの機能を追加します。

function AppModel(attrs){
    this.val = "";
    // オブザーバの追加
    this.listerners = {
        valid: [],
        invalid: []
    };
}

続いてプロトタイプでメソッドを追加します。

AppModel.prototype.on = function(event, func){
    this.listeners[event].push(func);
}
AppModel.prototype.trigger = function(event){
    $.each(this.listeners[event], function(){
        this();
    });
}
// setメソッドの追加
AppModel.prototype.set = function(val){
    if(this.val === val) return; // 引数で受け取ったvalとthis.valに変化がなければ以降の処理はしません
    this.val = val; // 変化があればthis.valに値をセットします
    this.validate(); 
}

次回はバリデーションを実装していきます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>