form validation in react

Slide 1

Slide 1 text

Form Valida+on In React [email protected]

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: ﬁeld value geFer and seFer – Status: ﬁeld 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