magazine off

ReactとTypeScriptでフォームのバリデーションを自作した話 | React Hooks

投稿日 : 2021年7月9日(金曜日)

ReactとTypeScriptでフォームのバリデーションをするとき、何か良い方法はないかなと検討をしていました。

React Form Hooksというnpmを使うと良いみたいな話も聞いたのですが、refを使ってるので良くないという話も聞きました。

ですので、自作することにしたのです。

条件的には、ステートの管理が煩雑にならないようにオブジェクトでフォームの値を一括管理して、

jsのsome関数でオブジェクトのメンバーの値が全てtrueになってたら、バリデーションが通ったということで、

ボタンが押せるという仕様です。

型を作る

まずはTypeScriptでユーザー登録の型を作っておきます。一旦、今回のバリデーションは、メールアドレスと名字と名前のみ、作ります。

export type MemberCreate = {
eMail: boolean
seiKana: boolean
meiKana: boolean
}

型が出来たら、こんな感じでuseStateにオブジェクトを作って、ステートで管理します、最初は全てのバリデーションに落ちるように全部falseです。

このオブジェクトのメンバーが全てtrueになったらボタンが押せるという具合です。

const [isValidation, setValidation] = useState<membercreate>({
eMail: false,
meiKana: false,
seiKana: false
})</membercreate>

次、useEfectを使って、フォームから値が入力されて値が変わったら、その値の変更をキャッチしてuseEfectが発火するようにします。

正規表現を使って、パターンを決めます、この正規表現の精度は気にしないでください、とりあえずメアド、それから日本語のひらがなの場合フラグをtrueにしてオブジェクトを更新します。

useEffect(() =&gt; {
const patternEmail = /[a-zA-Z0-9.!#$%&amp;'*+\/=?^_`{|}~-]+@[a-zA-Z0-9.!#$%&amp;'*+\/=?^_`{|}~-]/
const patternHiragana = /^[\u3040-\u309F]+$/

setValidation({
...isValidation,
meiKana: patternHiragana.test(meiKana) ? true : false,
eMail: patternEmail.test(email) ? true : false,
seiKana: patternHiragana.test(seiKana) ? true : false
})
}, [email, meiKana, seiKana])

老婆心で付け加えておくと、それぞれのフォームの値は、下記のような感じで作っています。

const [email, setEmail] = useState<string>('')
<grid item="" xs="{12}">
<textfield variant="outlined" onchange="{e"> setEmail(e.target.value)}
fullWidth
label="メールアドレス"
/&gt;
</textfield></grid>
```</string>

最後に、オブジェクトのメンバーの値が全部trueだったらボタンを押せるようにsome関数を使ってバリデーションを判定します。

</code></pre>

<button disabled="disabled" isallvalidationspassed=""> isAllValidationsPassed !== true)}
```

これでいける、実行動画は下記のような感じです。色々とフォームがありますが、今は名字と名前のひらがなフォームが、どっちもひらがなだけだった場合、なおかつメールアドレスが正しい場合のみ、

オブジェクトのメンバーの値が全部trueなので、ボタンが押せるようになります。それで、some関数は、オブジェクトのメンバーに一つでもfalseがあれば結果としてfalseを返すので、ボタンが押せず、フォームバリデーションが機能しますということでございます。

dynamic var を理解するための極意 – swift

    Swiftに置けるdynamic キーワードに関して、我々が…

投稿日 : 2017年12月11日(月曜日)

React Nativeで簡単にfetchする方法

 $ node -v v6.14.0 $ npm -v 3.10.10 api…

投稿日 : 2019年5月2日(木曜日)

React NativeでフォームからPHPでPOST送信して入力フォームの値を取得

   React Native import React, { Co…

投稿日 : 2018年7月17日(火曜日)