form validation in react

D226fdd4b353d92a66a1ef71539357f8?s=47 yiminghe
March 19, 2015

form validation in react

do form validation using react

D226fdd4b353d92a66a1ef71539357f8?s=128

yiminghe

March 19, 2015
Tweet

Transcript

  1. 2.

    form •  Tradi+onal  way   •  Library  way    

    •  React  way   – rc-­‐form-­‐valida+on
  2. 4.

    Problems •  Maintenance   – Script  and  html  is  separated  

    – A  lot  of  duplica+on   – Hard  to  reuse  code   – …
  3. 6.

    Library  way •  But  you  s+ll  need  to  get  data

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

    In  Short                

               DOM  Driven  
  5. 13.

    Step  by  step  -­‐2 •  Declare  data  model   – formData:

     field  value  geFer  and  seFer   – Status:  field  status  (errors,valida+ng…)  
  6. 14.

    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. 15.

    Step  by  step  -­‐4 •  Validate  on  submit  and  get

     data   – Call  validate  method   – Just  get  data  from  data  model  (two-­‐way  binding)
  8. 19.

    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!