1. @wiz-creative/form-validate

Installation

  $ npm i -D @wiz-creative/form-validate
  //OR
  $ npm i @wiz-creative/form-validate

import

import { Validate } from '@wiz-creative/form-validate'
// OR
const { Validate } = require('@wiz-creative/form-validate')

method種類

| Method | return | Description | | ---- | ---- | ---- | | Validate.check(element, string ) | 　object |　入力要素とバリデーションタイプの文字列をパラメータとして指定できます。 エラー表示に必要なObjectisを返します} | | Validate.errorMsg( string ) | string |　エラー タイプが指定されている場合は、エラー メッセージが返されます。 | | Validate.message | string |　 入力要素のラベルとエラー種別のキーを指定ができ、エラーメッセージのカスタマイズすることができます。返す値はエラーメッセージの文字列です。 | | Validate.defMessges | string |　 デフォルトエラーメッセージのObjectです。メッセージの変更はできません。返す値はエラーメッセージの文字列です。 |

validate type

• Validate.check()メソットの第二引数に使われるのはvalidate typeの文字列です。
• validate typeのstringはエラー表示のkeyとして使われます。
• typの設定はhtmlのattributeにスペース区切りで複数設定することができます。
  • 例) <input data-validate-type='minLength:5 required number maxLength:11'/>
• ※maxLength,minLength,max,mintypeに関してはコロン「:」にnumberを必ず一つセッティングする必要があります。
  • 例)maxLength:12 14 🙅‍♂️　maxLength:1 🙆‍♂️

| validate type | Description | | ---- | ---- | | required | valueがないかチェックする。 | | en | valueが英語かチェックする。 | | kana | valueがカタカナかチェックする。 | | email | emailタイプをチェックする。 | | number | Numberタイプをチェックする。 | | enNum | 数字または英語チェック | | maxLength:num | 文字列の最大文字数をチェックする。 | | minLength:num | 文字列の最低文字数をチェックする。 | | max:num | 数字の最低数値をチェックする。 | | min:num | 数字の最低数値をチェックする。 |

実装例

HTML設定サンプル

以下のHTMLのマークアップサンプルは、必須フィールドであり、最小10文字と最大文字列の最大11文字で数字タイプをチェックしてくれるHTMLのattuributeのValueにスペース区切りでvalidte Typeをセッティングします。

  <input 
    type="text"
    data-label-name='電話番号'
    data-validate-type='minLength:5 required number maxLength:11'
  >

エラーメッセージの設定

エラーメッセージはデフォルトで設定はされていますがカスタマイズすることもできます。 Validate.messageのObjectにvalidte Typeをkeyとして設定しメッセージを代入します。

• {maxLength}・{minLength}・{max}・{min} は:後にセッティングしたnumberが表示されます
• {name}上位のHTMLでセッティングしたdata-label-nameのValueが入ります。

エラーメッセージのカスタマイズ例

Validate.message = {
  required: '{name}項目は必須です。',
  maxLength:'{name}は{maxLength}文字以下で入力してください',
  min:'{name}は{min}以上入力してください',
  // ... skip ...
}

使用例

以下のサンプルはinputのvlueが変わる時バリデーションを走らせるコードです。 実装には実際使うハンドラとチェックループが必要です。 入力タイプが検証され、そのタイプに対してエラーが返された場合は、エラー メッセージが表示されます。 ※下記の例で関数の引数設は変数設定しなければいけません。Validateのmethodにエレメントの引数を設定する必要があります。

typscriptの場合使用例

 // target
changedInput(elm: HTMLInputElement ) :void {
  switch (elm.nodeName) {
    case 'INPUT':
    case 'SELECT':
      let element = (<HTMLInputElement>elm)
      // ValidateのTypeはattributから習得して引数にセットする方が効果的です。
      validateResult = Validate.check(element.value, 'required');
      break;
    default:
      break;
  }
  if(validateResult.isError) {
    // validateResult.keyとvalidateResult.paramsはチェックの時返してくれるのでinoutのラベルだけ引数とし渡します。
    let errorMsg = Validate.errorMsg(validateResult.key, 'お名前', validateResult.params);
    errorElm.innerHTML = errorMsg
  } else {
    errorElm.innerHTML = ''
  }
}
// ハンドラー設定
inputElms.forEach((elm: HTMLInputElement) => {
  elm.addEventListener('change', (e) =>  {
    let eventTarget = e.target as HTMLInputElement;
    changedInput(eventTarget);
  });
});

vanilla jsの場合使用例

const validateTset = (elm) => {
 switch (elm.nodeName) {
   case 'INPUT':
   case 'SELECT':
     validateResult = Validate.check(elm.value, 'required');
     break;
   default:
     break;
 }
 if (validateResult.isError) {
   let errorMsg = Validate.errorMsg(validateResult.key, 'お名前', validateResult.params);
   errorElm.innerHTML = errorMsg;
 } else {
   errorElm.innerHTML = '';
 }
};

//ハンドラー設定
inputElms.forEach((inputElm) => {
 inputElm.addEventListener('change', (e) => {
   validateTset(e.target);
 });
});

Reactの場合使用例

import React from "react"
import { Validate } from '@wiz-creative/form-validate'
const InputValidateTest = () => {
  const validateCheck = (e) => {
    let validateResult: any = Validate.check(e.value, e.getAttribute('data-validate-type'))
    let errorMsgElm = document.querySelector('[date-error-msg]')
    if(validateResult.isError) {
      let errorMsg = Validate.errorMsg(validateResult.key, e.getAttribute('data-label-name'), validateResult.params);
      errorMsgElm.innerHTML = errorMsg
    } else {
      errorMsgElm.innerHTML = ''
    }
  }
  return (
    <>
      <input
        type="text"
        data-label-name="お名前"
        data-validate-type="required"
        onChange={(e)=>{validateCheck(e.target)}}
      />
      <p date-error-msg="" />
    </>
  )
}
export default InputValidateTest

• 同じく実装してVue.jsでも使うことができます。

開発について提案プルリクやりとりなど

開発の詳細