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
510
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
57
支付宝小程序的开放架构
yiminghe
0
140
gitc2016 react based architecture
yiminghe
1
130
antd at qcon2016
yiminghe
1
170
react-based architecture
yiminghe
2
130
React Ecosystem At Ant Financial
yiminghe
4
2.1k
ant design preview
yiminghe
1
200
react best practice
yiminghe
3
160
react at alipay
yiminghe
43
4k
Other Decks in Technology
See All in Technology
FrontDoorとWebAppsを組み合わせた際のリダイレクト処理の注意点
kenichirokimura
1
500
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
2
450
Terraformあれやこれ/terraform-this-and-that
emiki
8
1.4k
20240416_devopsdaystokyo
kzkmaeda
1
220
データベース02: データベースの概念
trycycle
0
150
JAWS-UG Bedrock Claude Night
yamahiro
3
550
複雑な構成要素を持つUIとの向き合い方 〜新・支出グラフでの実例〜 / B43 TECH TALK
nakamuuu
0
140
Tellus の衛星データを見てみよう #mf_fukuoka
kongmingstrap
0
170
プロデザ! BY リクルート vol.18_リクルートのリサーチ実践組織「リサーチブーストコミュニティ」
recruitengineers
PRO
3
280
Databricks における 『MLOps』
databricksjapan
2
170
一生覚えておきたい「システム開発=コミュニケーション」〜初めての実務案件振り返りLT〜
maimyyym
0
120
元インフラエンジニアに成る / Human Resources to Human Relations
bobtani
4
900
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Navigating Team Friction
lara
178
13k
Music & Morning Musume
bryan
41
5.6k
Building a Scalable Design System with Sketch
lauravandoore
456
32k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
Fireside Chat
paigeccino
21
2.6k
The Language of Interfaces
destraynor
151
23k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Web Components: a chance to create the future
zenorocha
305
41k
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