カリデーションを使用したReactのレッドホットフォーム検証
検証には2つの種類があります。 バックエンド(またはサーバー側)はクライアントから送信されたものがすべて正常であることを確認し、フロントエンド(またはクライアント側)は何かが送信される前に確認します。 どちらも必要ですが、クライアント側の検証により、サーバーを行き来するオーバーヘッドなしに、ユーザーエクスペリエンスが大幅に向上します。
calidation は、フォームをラップできるコンポーネントを提供することにより、クライアント側のフォーム検証を支援するライブラリです。 このコンポーネントは、検証ルールを使用した構成を受け入れ、フィールド値、エラー、およびフォームが有効かどうかを含む関数を子として受け入れます。
開始するには、npm
またはyarn
を使用してプロジェクトにcalidation
を追加します。
npm経由:
npm add calidation --save
yarn add calidation
プロジェクトにcalidation
を追加することで、簡単なログインフォームを簡単に作成できます。
import React, { Component, Fragment } from "react"; import { FormValidation } from "calidation"; class LoginForm extends Component { onSubmit = ({ fields, errors, isValid }) => { if (isValid) { // This is where we'd handle our submission... // `fields` is an object, { field: value } console.log('Everything is good:', fields); } else { // `errors` is also an object! console.log('Something is wrong:', errors); } }; render() { const config = { email: { isRequired: "Email field is required!", isEmail: "Valid emails only, please!" }, password: { isRequired: "Password field required!", isMinLength: { message: "16+ character password is required", length: 16 } } }; return ( <FormValidation onSubmit={this.onSubmit} config={config}> {({ fields, errors, submitted }) => ( <Fragment> <label for="email">Email</label> <input name="email" type="email" value={fields.email} /> {submitted && errors.email && <div className="error">{errors.email}</div> } <label for="password">Password</label> <input name="password" type="password" value={fields.password} /> {submitted && errors.password && <div className="error">{errors.password}</div> } <button>Login</button> </Fragment> )} </FormValidation> ); } } export default LoginForm;
ライブラリは、入力が入力されたときに、追加のイベントハンドラーを作成せずに入力をチェックすることもできます。
バリデーターの土地から来て、入力ごとに変更イベントをデバウンスするこのアプローチは、新鮮な空気の息吹です。
calidation
ライブラリは、私たちが利用したいくつかの検証方法よりもはるかに多くのものを提供するため、ログインフォームの例は実際には氷山の一角にすぎません。 独自の検証メソッドと条件付きルールのローリングもサポートしています。
箱から出してすぐに使える検証方法の完全なリストは次のとおりです。
{ field: { isRequired: 'This field is required', isNumber: 'This field must be a number', isEqual: { message: 'This field must equal 10', value: 10, }, isGreaterThan: { message: 'This field must be greater than 0', value: 0, }, isLessThan: { message: 'This field must be less than 20', value: 20, }, isEmail: 'This field must be a valid email address', isRegexMatch: { message: 'This field is alphanumeric', regex: /^[a-z0-9]$/, }, isWhitelisted: { message: 'Field must be crocodilian', whitelist: ['alligator', 'crocodile'], }, isBlacklisted: { message: 'Field must NOT be crocodilian', blacklist: ['alligator', 'crocodile'], }, isMinLength: { message: 'Field must be at least 10 characters', length: 10, }, isMaxLength: { message: 'Field must be no more than 20 characters', length: 10, }, isExactLength: { message: 'Field must be exactly 5 characters', length: 5, }, } }
独自の「カリデター」のローリングや条件付き検証ロジックなどのより高度なトピックは、ライブラリの作成者によって非常によく文書化されています。
また、以前のログインコンポーネントのライブデモについては、このCodeSandboxを確認してください。