数年前、私は
HIVRに関する
LIVRに関する記事を見ました。それ以来、すべてのプロジェクトでこのライブラリを使用しています。 Reactへの移行に伴い、それを検証するように変更しました。 既存のソリューションは、私が望んだ柔軟性を提供しませんでした。 私はすでに2つのプロジェクトでソリューションを使用しており、npmに配置することにしました-他の誰かにとっては便利かもしれません。
パッケージは
react-livr-validationと呼ばれます。
基本的な使用例：
import React from 'react'; import Validation, {DisabledOnErrors, ValidationInput} from 'react-livr-validation'; const schema = { login: ['required', 'not_empty'], password: ['required', 'not_empty'] }; const data = { login: '', password: '' }; export default function() { return ( <Validation data={data} schema={schema} > <form> <ValidationInput name="login" > <input name="login" /> </ValidationInput> <ValidationInput name="password" > <input name="password" type="password" /> </ValidationInput> <DisabledOnErrors> <input type="submit" /> </DisabledOnErrors> </form> </Validation> ); }
コンポーネントは検証スキームと初期データを受け入れます（データが有効でない場合、送信ボタンはすぐに非アクティブになります）。カスタムルールとエイリアスルールを渡すこともできます。
const customRules = { alpha_chars: function() { return function(value) { if (typeof value === 'string') { if (!/[az,AZ]+/.test(value)) { return 'WRONG_FORMAT'; } } }; } }; const aliasedRules = [ { name: 'strong_password', rules: { min_length: 6 }, error: 'TOO_SHORT' } ]; <Validation data={data} schema={schema} rules={customRules} aliasedRules={aliasedRules} > // ... form </Validation>
ValidationInputラッパーは、検証のためにイベントハンドラーを検証に追加します。 デフォルトでは、これらは変更、ぼかし、キーアップイベントです。
<ValidationInput name="password" valicateOnEvents={['change', 'blur', 'keyUp']} > <input name="password" type="password" /> </ValidationInput>
ラッパーを実装する機会があります-APIをpropにスローするHOCエクスポートパッケージ