backbone.js モデルのバリデーション
backbone.jsでモデルのバリデーションを行うにはモデルでvalidateメソッドを実装します。
下のSourceにあるサンプルだと1つのエラーで1つずつAlertを表示するような形でしたが、複数の入力フィールドがあるのでまとめてエラーを出したいと思います。
var MyModel = Backbone.Model.extend({ validate: function(attr){ var error_len = 0; var errors = {}; /* いろいろバリデーション */ if( !attr.kana.match.match(/^[\u30A0-\u30FF]+$/) ){ errors["kana"] = "全角カナで入力してね"; } if ( attr.email && !attr.email.match(/^[A-Za-z0-9]+[\w-]+@[\w\.-]+\.\w{1,}$/) ){ errors["email"] = "Emailアドレスがおかしいよ"; } // Javascriptの連想配列はlengthが使えないので for(key in errors){ error_len++; } if(error_len > 0){ return errors; } } }); //view var MyView = Backbone.View.extend({ initialize: function(){ this.model.on("error", this.showError, this); }, showError: function(model, errors){ var msg = ""; for(key in errors){ $("#"+key).addClass("error"); msg += " - "+ errors[key] + "\n"; } alert(msg); for(key in errors){ $("#"+key).removeClass("error"); } },
エラーがあった場合は、フィールド毎のエラーメッセージをalert内に表示します。
エラーメッセージが表示されている間は、そのフィールドの入力テキストのボーダーを変更するcssを使っています。
Source:
http://backbonejs.org/#Model-validate
http://stackoverflow.com/questions/10334923/backbone-model-validation-standards-is-it-wrong-to-do-it-this-way
regexp:
http://befine.jugem.jp/?eid=29
http://programmer-toy-box.sblo.jp/article/16431782.html
http://phpjavascriptroom.com/?t=js&p=arrayobject#a_length