読者です 読者をやめる 読者になる 読者になる

backbone.js モデルのバリデーション

JavaScript 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