Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
form validation in react
Search
yiminghe
March 19, 2015
Technology
4
560
form validation in react
do form validation using react
yiminghe
March 19, 2015
Tweet
Share
More Decks by yiminghe
See All by yiminghe
小程序终端技术架构
yiminghe
0
230
支付宝小程序的开放架构
yiminghe
0
190
gitc2016 react based architecture
yiminghe
1
160
antd at qcon2016
yiminghe
1
220
react-based architecture
yiminghe
2
160
React Ecosystem At Ant Financial
yiminghe
4
2.2k
ant design preview
yiminghe
1
290
react best practice
yiminghe
3
210
react at alipay
yiminghe
43
4.4k
Other Decks in Technology
See All in Technology
20251027_マルチエージェントとは
almondo_event
1
460
コンパウンド組織のCRE #cre_meetup
layerx
PRO
1
270
JSConf JPのwebsiteをGatsbyからNext.jsに移行した話 - Next.jsの多言語静的サイトと課題
leko
2
190
Zero Trust DNS でより安全なインターネット アクセス
murachiakira
0
110
20251029_Cursor Meetup Tokyo #02_MK_「あなたのAI、私のシェル」 - プロンプトインジェクションによるエージェントのハイジャック
mk0721
PRO
1
580
頭部ふわふわ浄酔器
uyupun
0
110
dbtとAIエージェントを組み合わせて見えたデータ調査の新しい形
10xinc
5
1k
Building a cloud native business on open source
lizrice
0
190
オブザーバビリティが育むシステム理解と好奇心
maruloop
3
1.4k
AI駆動で進める依存ライブラリ更新 ─ Vue プロジェクトの品質向上と開発スピード改善の実践録
sayn0
1
320
ハノーファーメッセ2025で見た生成AI活用ユースケース.pdf
hamadakoji
1
490
re:Inventに行くまでにやっておきたいこと
nagisa53
0
500
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
526
40k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
A Tale of Four Properties
chriscoyier
161
23k
A designer walks into a library…
pauljervisheath
209
24k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Code Review Best Practice
trishagee
72
19k
Music & Morning Musume
bryan
46
6.9k
Visualization
eitanlees
149
16k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Transcript
Form Valida+on In React
[email protected]
form • Tradi+onal way • Library way
• React way – rc-‐form-‐valida+on
Tradi+onal way
Problems • Maintenance – Script and html is separated
– A lot of duplica+on – Hard to reuse code – …
Library way • hFp://jqueryvalida+on.org/documenta+on/
Library way • But you s+ll need to get data
when submit! • hFps://api.jquery.com/serialize/
Problems Customiza/on! Invasion!
In Short
DOM Driven
React Way DATA
Driven
Introduce • rc-‐form-‐valida+on • hFps://github.com/react-‐component/form-‐ valida+on
in general
Step by step -‐1 • Valida+on.FieldMixin – handleValidate – setField
Step by step -‐2 • Declare data model – formData:
field value geFer and seFer – Status: field status (errors,valida+ng…)
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
Step by step -‐4 • Validate on submit and get
data – Call validate method – Just get data from data model (two-‐way binding)
Advanced usage • Asynchronous valida+on • Validate custom
component
Asynchronous valida+on • Use validator func+on
Validate custom component • Validate custom component which supports
onChange props, such as rc-‐calendar:
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!
Try hFp://react-‐component.github.io/form-‐ valida+on/build/examples/form.html