JavaScriptでリアルタイムバリデーションを実装する その２ バリデーションを実装する
JavaScriptでリアルタイムバリデーションを実装する その２ バリデーションを実装する
ブレイクスルーJavaScriptのChapter-01を参考にリアルタイムで入力チェックしてくれるフォームを実装してみます。この書籍は解説がシンプルでわかりやすく、中級者を目指すJavaScript初級者におすすめです。
バリデーションを実装する
validateメソッド実装する前に、まずは判定を行うvalidation patternのメソッドをプロトタイプで実装します。
// 空かどうか
AppModel.prototype.required = function(){
return this.val !== "";
}
// 数値がnum以上かどうか
AppModel.prototype.maxlength = function(){
return num >= this.val.length;
}
// 数値がnum以下かどうか
AppModel.prototype.minlength = function(){
return num <= this.val.length;
}
次にthis.valの値が正しいかどうかをチェックするvalidateメソッドを実装します。
function AppModel(attrs){
this.val = "";
// ここで使用するvalidationのpetternを指定する
this.attrs = {
required: "";
maxlength: 10;
minlength: 5;
}
// オブザーバの追加
this.listerners = {
valid: [],
invalid: []
};
};
AppModel.prototype.set = function(val){
if(this.val === val) return;
this.val = val;
this.validate();
};
AppModel.prototype.validate = function(){
var val;
this.errors = []; // バリデーションエラーが出たものを保存しておくための配列
for(var key in this.attrs){
val = this.attrs[key];
// AppModelの添字にkeyを渡すことでメソッドを取り出してvalの引数を実行する
if(!this[key](val) this.errors.push(key);
}
};
// バリデーション後にthis.errorsの中身が空であればvalidイベントを通知し、空でなければinvalidイベントを通知する
this.trigger(! this.errors.length ? "valid" : "invalid");
次回はModelとViewの連携を実装していきます。