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
540
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
150
支付宝小程序的开放架构
yiminghe
0
170
gitc2016 react based architecture
yiminghe
1
130
antd at qcon2016
yiminghe
1
190
react-based architecture
yiminghe
2
150
React Ecosystem At Ant Financial
yiminghe
4
2.2k
ant design preview
yiminghe
1
260
react best practice
yiminghe
3
180
react at alipay
yiminghe
43
4.2k
Other Decks in Technology
See All in Technology
第13回 Data-Centric AI勉強会, 画像認識におけるData-centric AI
ksaito_osx
0
370
管理者しか知らないOutlookの裏側のAIを覗く#AzureTravelers
hirotomotaguchi
2
320
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
500
目の前の仕事と向き合うことで成長できる - 仕事とスキルを広げる / Every little bit counts
soudai
24
6.6k
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
11
2.9k
アジャイル開発とスクラム
araihara
0
170
Developer Summit 2025 [14-D-1] Yuki Hattori
yuhattor
19
5.8k
あれは良かった、あれは苦労したB2B2C型SaaSの新規開発におけるCloud Spanner
hirohito1108
2
370
Swiftの “private” を テストする / Testing Swift "private"
yutailang0119
0
120
OpenID BizDay#17 KYC WG活動報告(法人) / 20250219-BizDay17-KYC-legalidentity
oidfj
0
140
2024.02.19 W&B AIエージェントLT会 / AIエージェントが業務を代行するための計画と実行 / Algomatic 宮脇
smiyawaki0820
10
1.6k
人はなぜISUCONに夢中になるのか
kakehashi
PRO
6
1.5k
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Done Done
chrislema
182
16k
Six Lessons from altMBA
skipperchong
27
3.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Documentation Writing (for coders)
carmenintech
67
4.6k
Code Reviewing Like a Champion
maltzj
521
39k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
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