Slide 1

Slide 1 text

Form  Valida+on  In  React yiminghe@gmail.com

Slide 2

Slide 2 text

form •  Tradi+onal  way   •  Library  way     •  React  way   – rc-­‐form-­‐valida+on

Slide 3

Slide 3 text

Tradi+onal  way

Slide 4

Slide 4 text

Problems •  Maintenance   – Script  and  html  is  separated   – A  lot  of  duplica+on   – Hard  to  reuse  code   – …

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Library  way •  But  you  s+ll  need  to  get  data  when  submit!   •  hFps://api.jquery.com/serialize/  

Slide 7

Slide 7 text

Problems Customiza/on!   Invasion!

Slide 8

Slide 8 text

In  Short                            DOM  Driven  

Slide 9

Slide 9 text

React  Way                DATA  Driven  

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

in  general

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Step  by  step  -­‐2 •  Declare  data  model   – formData:  field  value  geFer  and  seFer   – Status:  field  status  (errors,valida+ng…)  

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Step  by  step  -­‐4 •  Validate  on  submit  and  get  data   – Call  validate  method   – Just  get  data  from  data  model  (two-­‐way  binding)

Slide 16

Slide 16 text

Advanced  usage   •  Asynchronous  valida+on   •  Validate  custom  component

Slide 17

Slide 17 text

Asynchronous  valida+on •  Use  validator  func+on  

Slide 18

Slide 18 text

Validate  custom  component •  Validate  custom  component  which  supports   onChange  props,  such  as  rc-­‐calendar:

Slide 19

Slide 19 text

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!

Slide 20

Slide 20 text

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