反応コンポーネントとノードのデータを検証する簡単で軽量な方法.js

👉
やあ、私は常にdev .に記事を書きたかったです、そして、これはNPMの私の最初のパッケージについての私の最初のポストです、そして、もちろん、私はそれに非常に興奮しています.
まず第一に自己紹介します.私は、PHP、LALAVEL、ノードを使用してコードを書く2年間の経験と完全なスタックのソフトウェアエンジニアです.反応する.JS、ゴランなど.
今日は私のパッケージについて話します.max-validator max-validator 非常に単純な、軽量(唯一の2.1 KBのgzip)、JavaScriptのオブジェクトを検証し、反応する高度にカスタマイズ可能なソリューションです.JSフォームも.
取り付けるmax-validator 次のコマンドを端末で実行します.

$ npm install --save max-validator

その後、コンポーネントまたはノードでそれを使用します.リクエストハンドラ

import V from 'max-validate';

const examplePerson = {
  name     : 'John',
  lastname : 'Doe',
  birthdate: '1997-07-17',
  age      : 22,
  email    : '[email protected]',
};

const result = V.validate(examplePerson, {
  name     : 'required|string|min:2|max:30',
  lastname : 'required|string|min:2|max:30',
  birthdate: 'required|date',
  age      : 'required|numeric|min:18|max:100',
  email    : 'required|email|max:50',
});

V.validate() 関数は

最初のパラメータは検証する情報を含むJavaScriptオブジェクトでなければなりません

番目のパラメータは、上記のデータを検証する正しいスキームでなければなりません

検証スキームは、| シンボル.
デフォルトでmax-validator 定義済みの規則

分{age: 'required|min:18' }

マックス{:height: 'required|max:250' }

の間{age: 'required|between:18,50' }

チェック{privacy_policy: 'required|checked' }

オブジェクト{info: 'required|object' }

アレイ{points: 'required|array' }

ブーリアン{isStudent: 'required|boolean' }

アルファ山脈数値{phoneNumber: 'required|alpha_numeric' }

アルファ{name: 'required|alpha' }

電子メール{email: 'required|email' }

アルファ波ダッシュ{slug: 'required|alpha_dash' }

インアレイ{gender: 'required|in_array:male,female' }

インノッピン{status: 'required|not_in:declined' }

JSON{data: 'required|json' }

IP{:ipAdress: 'required|ip' }

URL{:website: 'required|url' }

等しい{type: 'required|equals:person' }

等しい{currency: 'required|not_equals:eur' }

StartsRank with{certificate: 'required|starts_with:iso_' }

絶え間ない{email: 'required|ends_with:gmail.com' }

日付{birthdate: 'required|date' }

4データを検証するための追加ルール

必須-値が存在しない場合はエラーを返しますnull または空

nullable -値が空の場合はエラーを返しません.undefined , or null

string -値をバリデータとして文字列として渡す

numeric -数値イントロバリデータを数値として渡します

Here ルールとそのパラメータについてもっと見ることができます.
コールするデータを検証するにはvalidate 以下の方法V.validate(data, scheme) を返します.

hasError - 検証が失敗したかどうかを表すboolean

const result = V.validate(data, scheme);
consol.log(result.hasError); // true or false

isError - フィールドの検証に失敗した場合に返す関数

const result = V.validate(data, scheme);
consol.log(result.isError('name')); // true or false
consol.log(result.isError('name', 'max')); // true or false (To know validator failed for max length reason)

getError - フィールドの最初または全てのエラーメッセージを返す関数

const result = V.validate(data, scheme);
consol.log(result.getError('name')); // name is required
consol.log(result.getError('name', true)); // name is required, name must contain at least 3 characters

拡張するのはとても簡単ですmax-validator そして、あなた自身の規則を加えてください.
たとえば、与えられた値が配列で、配列長が与えられたparamより大きいかどうかをチェックします.

import V from 'max-validator';

/**
 * You can add as many params as you want or spread params using spread operator ...params
 * @param {string} RuleName
 * @param {function} ValidatorFunction
 * @param {?string} ErrorMessage
 */
V.extend('custom_array', function(value, min_length){
  const err = { min_length: min_length }

  if(Array.isArray(value) && value.length <= min_length ) {
    return true;
  }

  return err;
}, 'array is invalid, it must have at least :min_length elements');
// You can pass value in message as well

次に、上記のルールを使用できます.

import V from 'max-validator'

const result = V.validate({data: [1, 2, 3, 4] }, {data:'required|array|custom_array:5'});

console.log(result.hasError, result.isError('data'), result.getError('data'));
// true, true, array is invalid, it must have at least 5 elements

バリデーターを拡張し、エラーを処理する方法を知っています.
また、単純にデフォルトのメッセージをオーバーライドすることもできますsetMessages オブジェクトキーが規則名であるメソッド.

import V from 'max-validate';

V.setMessages({
  required: 'value is required',
  min: 'Minimum value for :name is not met'
  ...
});

V.setDefaultMessage('Something is invalid in your data');

上記の通りmax-validate 反応と互換性があります.jsも.
ここでは、ユーザーのログインフォームを検証するための非常に簡単なコードを示します.

import React from 'react';
import V from 'max-validate';

const LoginForm = (props) => {
  const [formState, setFormState] = React.useState({
    isValid: false,
    values: {},
    touched: {},
    errors: V.empty(),
  });

  useEffect(() => {
    const result = V.validate(formState.values, {
      email: 'required|email',
      password: 'required|min:6'
    });

    setFormState((formState) => ({...formState,
      isValid: result.hasError,
      errors: result.hasError ? result : V.empty(),
    }));
  }, [formState.values]);

  const handleChange = (event) => {
    event.preventDefault();

    setFormState((formState) => ({ ...formState,
      values: { ...formState.values,
        [event.target.name]: event.target.value,
      },
      touched: {...formState.touched,
        [event.target.name]: true,
      },
    }));
  };

  const hasError =  (field) => (formState.touched[field] && formState.errors.isError(field));

  return (
    <form>
      <input hasError={hasError('email')} name="email" onChange={handleChange} />
      <input hasError={hasError('password')} name="password" onChange={handleChange} />
      <button disabled={!formState.isValid}>Login</button>
    </form>
  );
}

あなたがより学びたいならばmax-validator あなたは見ることができますGithub repository そして、自由に貢献してください.
あなたの興味のおかげで、私はあなたがそれを楽しんでほしい