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
わたしがEMとして入社した「最初の100日」の過ごし方 / EMConfJp2025
daiksy
14
5.4k
技術スタックだけじゃない、業務ドメイン知識のオンボーディングも同じくらいの量が必要な話
niftycorp
PRO
0
120
AI自体のOps 〜LLMアプリの運用、AWSサービスとOSSの使い分け〜
minorun365
PRO
9
790
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
160
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
8
4k
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
760
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
9
2.5k
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
12
4.5k
事業を差別化する技術を生み出す技術
pyama86
2
470
Pwned Labsのすゝめ
ken5scal
2
540
急成長する企業で作った、エンジニアが輝ける制度/ 20250227 Rinto Ikenoue
shift_evolve
0
190
Охота на косуль у древних
ashapiro
0
120
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
133
9.1k
A better future with KSS
kneath
238
17k
Statistics for Hackers
jakevdp
797
220k
Designing Experiences People Love
moore
140
23k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Gamification - CAS2011
davidbonilla
80
5.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Designing for Performance
lara
605
68k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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