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

form validation in react

yiminghe
March 19, 2015

form validation in react

do form validation using react

yiminghe

March 19, 2015
Tweet

More Decks by yiminghe

Other Decks in Technology

Transcript

  1. form •  Tradi+onal  way   •  Library  way    

    •  React  way   – rc-­‐form-­‐valida+on
  2. Problems •  Maintenance   – Script  and  html  is  separated  

    – A  lot  of  duplica+on   – Hard  to  reuse  code   – …
  3. Library  way •  But  you  s+ll  need  to  get  data

     when  submit!   •  hFps://api.jquery.com/serialize/  
  4. In  Short                

               DOM  Driven  
  5. Step  by  step  -­‐2 •  Declare  data  model   – formData:

     field  value  geFer  and  seFer   – Status:  field  status  (errors,valida+ng…)  
  6. Step  by  step  -­‐3 •  Just  render  html  by  data

     model  and  valida+on   rules   – handleValidate  provided  by  mixins   – Declare  rules  in  Validator   – Wrap  input  by  Validator  and  Valida+on
  7. Step  by  step  -­‐4 •  Validate  on  submit  and  get

     data   – Call  validate  method   – Just  get  data  from  data  model  (two-­‐way  binding)
  8. What’s  next •  Isomorphic  Valida+on   – hFps://github.com/yiminghe/async-­‐validator   •  rc-­‐form-­‐valida/on

     depends  on  async-­‐validator   •  async-­‐validator  can  be  run  at  nodejs! Let’s  share  some  valida/on  rules!