Upgrade to Pro — share decks privately, control downloads, hide ads and more …

フロントエンド・バリデーション

Seiya IZUMI
October 07, 2017

 フロントエンド・バリデーション

WEBエンジニア勉強会 #03

Seiya IZUMI

October 07, 2017
Tweet

More Decks by Seiya IZUMI

Other Decks in Programming

Transcript

  1. Immutable#Record const Man = new Record({ name: null, age: null

    }); const man = new Man({ name: "Justine", age: 10 }); man.get("name") // "Justine" man.get("age") // 10 man.age = 20 // Here raises an error Ϟσϧߏ଄Λ࡞ΔͷʹΑ͘࢖ΘΕΔImmutable#Record
  2. validatable-record const hello = 100 console.log("hello world"); • const ValidatableMan

    = ValidatableRecord({ name: null, age: null }, { name: { presence: true }, age: { presence: { message: "is invalid" } } }); ValidatableRecordΛImmutable#Recordͷ୅ΘΓʹ࢖༻
  3. class Man extends ValidatableMan { ... } const man =

    new Man({ name: "Michael", age: "55" }); man.validate() // == true man.get("name") // "Michael" man.get("age") // 55 validatable-record validateϝιου͕ϝϯόͱͯ͠࢖͑ΔΑ͏ʹͳΔɻ
  4. class Man extends ValidatableMan { ... } const agelessMan =

    new Man({ name: "Michael", }); agelessMan.validate() // == false agelessMan.getErrors() // == [ "Age is invalid" ] validatable-record getErrorsΛ࢖͏͜ͱͰόϦσʔγϣϯΤϥʔΛऔಘͰ͖Δ