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
OpenID Connect for Identity Assurance の概要と翻訳版のご紹介 / 20250219-BizDay17-OIDC4IDA-Intro
oidfj
0
160
Larkご案内資料
customercloud
PRO
0
650
エンジニアのためのドキュメント力基礎講座〜構造化思考から始めよう〜(2025/02/15jbug広島#15発表資料)
yasuoyasuo
16
6.3k
ビジネスモデリング道場 目的と背景
masuda220
PRO
9
410
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
540
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
220
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
3
920
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
670
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
13
5k
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
120
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
990
利用終了したドメイン名の最強終活〜観測環境を育てて、分析・供養している件〜 / The Ultimate End-of-Life Preparation for Discontinued Domain Names
nttcom
1
120
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
4 Signs Your Business is Dying
shpigford
182
22k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
9
430
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Facilitating Awesome Meetings
lara
51
6.2k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
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