Wiz Creative Form Validate
npm install @wiz-creative/form-validate
$ npm i -D @wiz-creative/form-validate
//OR
$ npm i @wiz-creative/form-validate
import
js
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にスペース区切りで複数設定することができます。
- 例)
- ※,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 | 数字の最低数値をチェックする。 |
---
実装例
----$3
以下のHTMLのマークアップサンプルは、必須フィールドであり、最小10文字と最大文字列の最大11文字で数字タイプをチェックしてくれるHTMLのattuributeのValueにスペース区切りでvalidte Typeをセッティングします。
`html
type="text"
data-label-name='電話番号'
data-validate-type='minLength:5 required number maxLength:11'
>
`$3
---
エラーメッセージはデフォルトで設定はされていますがカスタマイズすることもできます。
のObjectにvalidte Typeをkeyとして設定しメッセージを代入します。
- {maxLength}・{minLength}・{max}・{min} は:後にセッティングしたnumberが表示されます
- {name}上位のHTMLでセッティングしたdata-label-nameのValueが入ります。
#### エラーメッセージのカスタマイズ例
`ts
Validate.message = {
required: '{name}項目は必須です。',
maxLength:'{name}は{maxLength}文字以下で入力してください',
min:'{name}は{min}以上入力してください',
// ... skip ...
}
`---
使用例
以下のサンプルはinputのvlueが変わる時バリデーションを走らせるコードです。
実装には実際使うハンドラとチェックループが必要です。
入力タイプが検証され、そのタイプに対してエラーが返された場合は、エラー メッセージが表示されます。
※下記の例で関数の引数設は変数設定しなければいけません。Validateのmethodにエレメントの引数を設定する必要があります。$3
ts
// target
changedInput(elm: HTMLInputElement ) :void {
switch (elm.nodeName) {
case 'INPUT':
case 'SELECT':
let element = (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);
});
}); `$3
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);
});
});
`
$3
js
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 (
<>
data-label-name="お名前"
data-validate-type="required"
onChange={(e)=>{validateCheck(e.target)}}
/>
)
}
export default InputValidateTest``