form validation in react

Transcript

1. 1.

   Form  Valida+on  In  React yiminghe@gmail.com

2. 2.

   form •  Tradi+onal  way   •  Library  way    

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

   Tradi+onal  way

4. 4.

   Problems •  Maintenance   – Script  and  html  is  separated  

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

   Library  way •  hFp://jqueryvalida+on.org/documenta+on/  

6. 6.

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

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

   Problems Customiza/on!   Invasion!

8. 8.

   In  Short                

              DOM  Driven  
9. 9.

   React  Way                DATA

    Driven  
10. 10.

    Introduce •  rc-­‐form-­‐valida+on   •  hFps://github.com/react-­‐component/form-­‐ valida+on  

11. 11.

    in  general

12. 12.

    Step  by  step  -­‐1 •  Valida+on.FieldMixin   – handleValidate   – setField

     
13. 13.

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

     field  value  geFer  and  seFer   – Status:  field  status  (errors,valida+ng…)  
14. 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
15. 15.

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

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

    Advanced  usage   •  Asynchronous  valida+on   •  Validate  custom

     component
17. 17.

    Asynchronous  valida+on •  Use  validator  func+on  

18. 18.

    Validate  custom  component •  Validate  custom  component  which  supports  

    onChange  props,  such  as  rc-­‐calendar:
19. 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!
20. 20.

    Try     hFp://react-­‐component.github.io/form-­‐ valida+on/build/examples/form.html