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

backbone.validationメモ

JavaScript backbone

参考:thedersen/backbone.validation · GitHub
backbone 1.2.0
backbone.validation 0.11.5

backbone自体にvalidation機能はあるが、処理をいちいち書かないといけないし複雑化すると後から読むのも大変。
なのでbackbone.validationプラグインを使ってスッキリさせる。

Model

バリデーターはModelに「validation」プロパティで指定する。
key=Modelのkey、 value=バリデーター。
処理を記述する場合はfunctionを指定。戻り値にエラーメッセージを返す。

var model = Backbone.Model.extend({
  validation: {
    name: function(value, attr, computedState) {
      if (value == '名無しの権兵衛') return '名前不正';
    }
  }
});

もしくは別でfunctionを作っておいてfunction名を指定。

  validation: {
    name: 'validateName'
  },
  validateName: function() {(略)}

よくあるバリデーターが用意されている。

  validation: {
    name: { required: true }, // 必須
    agreement: { acceptance: true }, // 許諾(true or 'true'のみ可。「同意しますか?」チェックボックスなんかで)
    age: { min: 1 }, // 最小(以上)
    age2: { max: 100 }, // 最大(以下)
    zipcode: { length: 7 }, // 桁数
    password: { minLength: 8 }, // 最小桁数
    password2: { maxLength: 256 }, // 最大桁数
    password3: { rangeLength: [8, 256] }, // 桁数範囲
    language: { oneOf: ['jp', 'en', 'others'] }, // どれかに該当
    passwordRe: { equalTo: 'password' }, // 他のattributeと同値(passwordRe == 'password'ではなく、passwordRe == password)
    mail: { pattern: 'email' }, // 正規表現パターン(この場合はプラグイン定義済みのe-mailパターン)
    weight: { pattern: 'number' }, // 数値(小数も可)
    code: { pattern: 'digits' }, // 数字のみ(≠整数) /^\d+$/
    url: { pattern: 'url' }, // url
    word: { pattern: /^[A-Z]/ } // 独自正規表現
  }

エラー時のメッセージは用意されているが、独自メッセージを出したい場合はmsgを指定。
というかデフォルトメッセージは英語なので全部指定することになる。

    name: {
      required: true,
      msg: '名前は必須です' // functionで文字列return、でも可
    }

複数バリデーター指定もできる。

    name: {
      required: true,
      minLength: 2,
      msg: '名前は必須で2文字以上'
    }

バリデーター毎にメッセージを変えたい場合は配列指定。

    name: [{
      required: true,
      msg: '名前は必須'
    },{
      minLength: 2,
      msg: '名前は2文字以上'
    }]

bind

Viewにバインドする。
バインドするタイミングは、model or collectionがinitializeされた後ならいつでもいい。
Marionette + stickitを使っていて、onShow()でstickitのbindをしてあるので、bind並びでvalidationもそこでbindすることにする。

onShow: function() {
  this.stickit(); // stickitのbind
  Backbone.Validation.bind(this); // validationのbind
}

Backbone.Validation.unbind(view)でunbindされる。

Modelのoverride

bindするとmodelのvalidate()とisValid()がオーバーライドされるので、自分で実装する必要がない。処理を書く手間が省けるのはやはり有難い。

あとpreValidate()が実装され、modelにsetする前に事前検証ができるようになる。
と言ってもstickit使っているとpreValidate()の使いドコロが無い。
とりあえずsave前にvalidate()を呼んでエラー表示することにする。