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
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
550
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
6
57k
AWSでRAGを実現する上で感じた3つの大事なこと
ymae
3
1k
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
130
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
670
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
1
1.1k
RSNA2024振り返り
nanachi
0
500
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
460
7日間でハッキングをはじめる本をはじめてみませんか?_ITエンジニア本大賞2025
nomizone
2
1.4k
High Performance PHP
cmuench
0
140
君も受託系GISエンジニアにならないか
sudataka
2
370
テストアーキテクチャ設計で実現する高品質で高スピードな開発の実践 / Test Architecture Design in Practice
ropqa
3
710
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
GitHub's CSS Performance
jonrohan
1030
460k
Embracing the Ebb and Flow
colly
84
4.6k
Adopting Sorbet at Scale
ufuk
74
9.2k
Facilitating Awesome Meetings
lara
51
6.2k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
A Philosophy of Restraint
colly
203
16k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
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