data-driven-formsでバリデーションを実装

# data-driven-formsでバリデーションを実装
## やりたいこと
テキストボックスに桁数、最大、最小、全角、半角のバリデーションを入れる。

## 実装
codeSandboxでバリデーションを入れたテキストボックスを作成しました。

https://codesandbox.io/s/data-driven-forms-example-forked-dhlso

コード全文は下記の通りです。

```App.js
import React from "react";
import FormRenderer from "@data-driven-forms/react-form-renderer/form-renderer";
import componentTypes from "@data-driven-forms/react-form-renderer/component-types";
import validatorTypes from "@data-driven-forms/react-form-renderer/validator-types";
import TextField from "@data-driven-forms/mui-component-mapper/text-field";
import FormTemplate from "@data-driven-forms/mui-component-mapper/form-template";

const schema = {
  title: "Validator mapper",
  fields: [
    {
      component: componentTypes.TEXT_FIELD,
      name: "桁数チェック",
      label: "桁数チェック",
      helperText: "5文字以上10文字以下",
      validate: [
        {
          type: validatorTypes.MIN_LENGTH,
          threshold: 5,
          message: "5文字以上で入力してください。"

        },
        {
          type: validatorTypes.MAX_LENGTH,
          threshold: 10,
          message: "10文字以下で入力してください。"
        }
      ]
    },
    {
      component: componentTypes.TEXT_FIELD,
      name: "数値の最大最小",
      label: "数値の最大最小",
      helperText: "1以上30以下",
      type: "number",
      validate: [
        {
          type: validatorTypes.MIN_NUMBER_VALUE,
          includeThreshold: true,
          value: 1,
          message: "1以上30以下で入力してください。"
        },
        {
          type: validatorTypes.MAX_NUMBER_VALUE,
          includeThreshold: true,
          value: 30,
          message: "1以上30以下で入力してください。"
        }
      ]
    },
    {
      label: "半角チェック",
      component: componentTypes.TEXT_FIELD,
      name: "半角チェック",
      helperText: "半角英数のみ",
      validate: [{ type: "halfwidth" }]
    },
    {
      label: "全角チェック",
      component: componentTypes.TEXT_FIELD,
      name: "全角チェック",
      helperText: "全角英数かな",
      validate: [{ type: "fullwidth" }]
    }
  ]
};

const componentMapper = {
  [componentTypes.TEXT_FIELD]: TextField
};

const validatorMapper = {
  halfwidth: ({ message }) => (value) => {
    if (!value) {
      return;
    }

    if (!value.match(/^[a-zA-Z0-9]+$/)) {
      return message || "半角入力のみ";
    }
  },

  fullwidth: ({ message }) => (value) => {
    if (!value) {
      return;
    }

    if (!value.match(/^[ａ-ｚＡ-Ｚ０-９ぁ-んァ-ン]+$/)) {
      return message || "全角入力のみ";
    }
  }
};

const ValidatorMapper = () => (
  <FormRenderer
    FormTemplate={FormTemplate}
    validatorMapper={validatorMapper}
    componentMapper={componentMapper}
    schema={schema}
    onSubmit={console.log}
  />
);

export default ValidatorMapper;

```

### 1. 桁数のバリデーション
#### [Length-Validator](https://data-driven-forms.org/schema/length-validator)を使う
`MIN_LENGTH`でテキストの最小の長さを、`MAX_LENGTH`でテキストの最大の長さをチェックします。また、`EXACT_LENGTH`でテキストの正確な長さをチェックします。
バリデーターの閾値は`threshold: number`で指定します。

### 2. 数字の最大値、最小値のバリデーション
#### [Number value Validator](https://data-driven-forms.org/schema/number-value-validator)を使う
`MIN_NUMBER_VALUE`で数値が値よりも小さいかどうか、`MAX_NUMBER_VALUE`で数値が値よりも大きいかどうかをチェックします。
`includeThreshold: true,`の場合は閾値を含む範囲、`includeThreshold: false,`の場合は閾値を含まない範囲となり、デフォルトは`true`となっています。

### 3. 全角、半角のバリデーション
#### [Custom Validator](https://data-driven-forms.org/schema/custom-validator)を使う
data-driven-formsのデフォルトでは全角、半角のバリデーションがなかったため、カスタムバリデーターを使って自作します。

- 正規表現を使って半角のみ、全角のみの`validatorMapper `を作成。  
半角入力のみを`halfwidth`、全角入力のみを`fullwidth`としています。

```App.js
const validatorMapper = {
  halfwidth: ({ message }) => (value) => {
    if (!value) {
      return;
    }

    if (!value.match(/^[a-zA-Z0-9]+$/)) {
      return message || "半角入力のみ";
    }
  },

  fullwidth: ({ message }) => (value) => {
    if (!value) {
      return;
    }

    if (!value.match(/^[ａ-ｚＡ-Ｚ０-９ぁ-んァ-ン]+$/)) {
      return message || "全角入力のみ";
    }
  }
};
```

- schemaのバリデートのタイプに`validatorMapper`の中で定義したものを指定する。  
半角入力のみのバリデーションを行う場合　
`validate: [{ type: "halfwidth" }]`  
半角入力のみのバリデーションを行う場合　
`validate: [{ type: "fullwidth" }]`


## 最後に
エラー時のエラーメッセージは`validate`の中で`message: "エラーメッセージの内容"`とすることで表示させることができます。
また、半角、全角チェックの他に、数字のみやemail、郵便番号といった入力チェックを行いたい場合もカスタムバリデーター、正規表現を使って対応可能だと思います。