国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂
コミュニティ
記事
トピックス
に質(zhì)問
學(xué)ぶ
コース
プログラミング辭典
ツールライブラリ
開発ツール
公式サイト
PHP ライブラリ
JS特殊効果
サイト素材
拡張プラグイン
AIツール
レジャー
ゲームのダウンロード
ゲームのチュートリアル
日本語
簡體中文
English
繁體中文
日本語
???
Melayu
Fran?ais
Deutsch
Login
singup
React Hook フォームと yup 検証: 効果的なフォーム検証方法
P粉486743671
2023-08-28 10:04:56
0
1
625
<p>React JS 電子商取引 Web サイト用に Buy Now コンポーネントを作成しました。私が直面している問題は、フォームの検証が完了していないことです。パーサーを使用しましたが、それでもフォームが検証されませんでした。これは私です:</p> <pre class="brush:php;toolbar:false;">import React, { useEffect, useState } from 'react' 「./e.css」をインポートします。 import { useForm } from "react-hook-form"; 「@hookform/resolvers/yup」から { yupResolver } をインポートします。 import * as yup from "yup" デフォルト関數(shù)のエクスポート BuyNow(props) { const [國, set Country] = useState([]) useEffect(() => { const getcountry = async () => { const res = await fetch("http://localhost:3000/setpk.json") const getcon = await res.json() set Country(getcon を待つ) } getcountry() }、[]) const スキーマ = yup.object({ フルネーム: yup.string().required()、 電子メール: yup.string().email().required()、 アドレス: yup.string().required()、 電話番號: yup.number().required().integer().min(11)、 都市: yup.string().required()、 支払い: yup.string().required() }) const { register、handleSubmit、watch、formState: { エラー } } = useForm({ リゾルバ: yupResolver(スキーマ) }); const onSubmit = (データ) => { コンソール.ログ(データ) } 戻る ( <> <div className="詳細 h-[90vh] bg-indigo-600 mt-20 text-indigo-400 text-center"> <h1 className='text-indigo-200'>立即購買</h1> <フォーム onSubmit={handleSubmit(onSubmit)}> <div className='space-y-5 mt-4 flex flex-col w-[70%] sm:w-[66%] md:w-[55%] mx-auto'> <入力名=「名前」 id="名前" placeholder='姓名' {...register("フルネーム") } /> <入力名="メール" id="メール" placeholder='電子郵件' className="text-indigo-400 " {...登録("メール") } /> <入力名="住所" id="アドレス" placeholder='送貨地址' {...register("住所") } /> <入力タイプ=「數(shù)値」名前=「電話」 id="" placeholder='電話番號' {...register("電話番號") } /> <名前を選択=「さ」 id=「として」 {...登録("都市") }> <オプションが選択されていません>--城市名--</option> { country.map((countryget, i) => ( <option key={i} >{countryget.city}</option> )) } </選択> <div className='flex 相対 w-auto'> <名前を選択="" id="" className='支払基準(zhǔn)-完全 w-[70%] ' {...register("payment") }>> <オプションが選択されて無効になっています> --付款方式-- </option> <option >信用卡</option> <option >付款</option> <option >銀行轉(zhuǎn)賬</option> </選択> <img src="http://localhost:3000/creditcard.png" alt="" className='absolute w-10 right-5' /> </div> {/* <ボタンの種類="送信" className='bg-indigo-600 p-2rounded-lg font-monoAbsolute '>進む ?</button> */} </div> <入力タイプ=「送信」 className='bg-rose-600 p-2rounded-lg font-mono text-white mt-3' /> </フォーム> </div> <div className="pricesection h-20 bg-rose-600fixedbottom-0 left-0 right-0 flex items-center px-1 text-rose-100 justify-evenly md:justify-around"> <h2 className='text-xl md:text-2xl md:font-bold '>總價</h2> <h2 className='text-2xl font-bold '>${props.totalprice}</h2> </div> </> ) }</pre> <p> テーブルが制御されないことを望んでいます。モードを書き込み、パーサーを使用しています。
1
0
0
P粉486743671
返事
全員に返信
(1)
返信します
近い
P粉022723606
2023-08-29 00:43:23
1棟
yup.integer() を yup.string() に置き換えることで、この問題を解決しました。
電話番號: yup.number().required().integer().min(11),
いいねを押す
+0
返信を追加
關(guān)閉回復(fù)
P粉486743671
返事
人気のトピック
詳細>
NYTの接続はヒントと回答です
NYTミニクロスワードの回答
ene.sys
Java チュートリアル
人気の記事
Ethereum Callback 2000は?近年のイーサリアムの傾向の簡単な概要
なぜBinanceアカウントの登録が失敗するのですか?原因と解決策
JDBCを使用してJavaのトランザクションを処理する方法は?
vscode settings.jsonの場所
Windows內(nèi)のすべてのユーザーにシステムを表示する方法
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)
1466366
PHP 入門チュートリアル 1: 1 週間で PHP を?qū)Wぶ
4350290
JAVA 初心者向けビデオチュートリアル
2909552
最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)
1466366
JAVA 初心者向けビデオチュートリアル
2909552
Little Turtle のゼロベースの Python 學(xué)習(xí)入門ビデオ チュートリアル
540017
Web フロントエンド開発の簡単な紹介
219786
PSビデオチュートリアルをゼロからマスターする
981382
[Web フロントエンド] Node.js クイック スタート
14915
海外のWeb開発フルスタックコースの完全なコレクション
12043
Go言語実踐GraphQL
9966
550W ファンマスターが JavaScript をゼロから段階的に學(xué)習(xí)します
1152
Python マスター Mosh、基礎(chǔ)知識ゼロの初心者でも 6 時間で始められる
49848
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
[フォームボタン] jQuery エンタープライズ メッセージ フォームの連絡(luò)先コード
[プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果
[メニューナビゲーション] HTML5 クールなパーティクル アニメーション ナビゲーション メニューの特殊効果
[フォームボタン] jQuery ビジュアル フォームのドラッグ アンド ドロップ編集コード
[プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤー コード
[html5特殊効果] 古典的な HTML5 プッシュ ボックス ゲーム
[畫像の特殊効果] 畫像効果を追加または削減するための jQuery スクロール
[フォトアルバム効果] CSS3 個人アルバム カバー ホバー ズーム効果
[ブートストラップ テンプレート] 有機果物と野菜のサプライヤー Web テンプレート Bootstrap5
[バックエンドテンプレート] Bootstrap3 多機能データ情報バックグラウンド管理レスポンシブ Web ページ テンプレート-Novus
[ブートストラップ テンプレート] 不動産リソース サービス プラットフォーム Web ページ テンプレート Bootstrap5
[ブートストラップ テンプレート] シンプルな履歴書情報 Web テンプレート Bootstrap4
[ブートストラップ テンプレート] ブートストラップ レスポンシブ ワイドスクリーン ブック教育 Web サイト テンプレート-DREAMLIFE
[バックエンドテンプレート] MAC スタイルのレスポンシブ ブルー エンタープライズ CMS バックグラウンド管理システム テンプレート
[バックエンドテンプレート] レスポンシブなグラデーション雰囲気の背景管理システムのウェブサイトのテンプレート-usinessbox
[ブートストラップ テンプレート] レスポンシブな野菜と果物の店のウェブサイト テンプレート-Organio
[PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG)
[PNG素材] 4 つの赤い 2023 卒業(yè)バッジ ベクター素材 (AI+EPS+PNG)
[バナー畫像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材(AI+EPS)
[PNG素材] 金色の卒業(yè)帽ベクター素材(EPS+PNG)
[PNG素材] 黒と白のスタイルの山アイコン ベクター素材 (EPS+PNG)
[PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材(EPS+PNG)
[バナー畫像] フラット スタイルの植樹祭バナー ベクター素材 (AI+EPS)
[PNG素材] 9つのコミックスタイルの爆発するチャットバブルベクター素材(EPS+PNG)
[フロントエンドテンプレート] 室內(nèi)裝飾クリーニングおよび修理サービス會社のウェブサイトのテンプレート
[フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
[フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
[フロントエンドテンプレート] 現(xiàn)代のエンジニアリング建設(shè)會社のウェブサイトのテンプレート
[フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
[フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
[フロントエンドテンプレート] IT テクノロジーがインターネット企業(yè)の Web サイト テンプレートを解決します
[フロントエンドテンプレート] パープルスタイル外國為替取引サービスウェブサイトテンプレート