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
550
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
210
支付宝小程序的开放架构
yiminghe
0
180
gitc2016 react based architecture
yiminghe
1
150
antd at qcon2016
yiminghe
1
210
react-based architecture
yiminghe
2
150
React Ecosystem At Ant Financial
yiminghe
4
2.2k
ant design preview
yiminghe
1
280
react best practice
yiminghe
3
200
react at alipay
yiminghe
43
4.3k
Other Decks in Technology
See All in Technology
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
360
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
950
AI導入の理想と現実~コストと浸透〜
oprstchn
0
180
AI専用のリンターを作る #yumemi_patch
bengo4com
5
3.8k
KubeCon + CloudNativeCon Japan 2025 に行ってきた! & containerd の新機能紹介
honahuku
0
120
WordPressから ヘッドレスCMSへ! Storyblokへの移行プロセス
nyata
0
390
モバイル界のMCPを考える
naoto33
0
400
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
280
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
540
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
400
ドメイン特化なCLIPモデルとデータセットの紹介
tattaka
2
550
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
120
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Code Review Best Practice
trishagee
69
18k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Become a Pro
speakerdeck
PRO
28
5.4k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Transcript
Form Valida+on In React yiminghe@gmail.com
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