バリデーションは作るアプリによって個性的なモノを用意する場合がありますね。
つまり簡単に拡張できるように作っておいた方がいいですよね。
使い方
import {ValidationEach} from validation.js
ValidationEach('hogehoge',['NotNull', {MaxLength: 5}, {MinLength: 1}])
> ['MAX LENGTH: 5']
ValidationEach('',['NotNull', {MinLength: 1}])
> ['NotNull', 'MIN LENGTH: 1']
ValidationEach('hoge',['NotNull', 'IsAlphabet'])
> true
どうでしょうか?
検証したい値と、validation名(maxLengthとかはobject)を配列で渡すと結果が返ってきます。
バリデーションメッセージも簡単に変更できるように考えました。
下記がソースになります。
簡単な感じしませんか?
/* validations */
// バリデーションメッセージ
const errorMessage = {
MaxLength : (limit)=> 'MAX LENGTH: ' + limit,
MinLength : (limit)=> 'MIN LENGTH: ' + limit,
NotNull : 'EMPTY!',
IsAlphabet : 'Only Alphabet!',
IsJa : '漢字・ひらがな・カタカナのみ!',
IsJaKatakana: 'カタカナのみ!',
IsNumber : 'Only IsNumber!',
IsPassword : 'パスワードを確認してください',
IsEmail : 'メールアドレス?'
}
// NotNull 入力値が設定されているか
export function NotNull (value) {
return (value !== undefined && value !== null && value !== '') || errorMessage.NotNull;
}
// MaxLength MAX文字数
export function MaxLength (value, limit) {
return String(value).length < limit || errorMessage.MaxLength(limit);
}
// MinLength MAX文字数
export function MinLength (value, limit) {
return String(value).length > limit || errorMessage.MinLength(limit)
}
// 半角英字のみ
export function IsAlphabet(value) {
return ( value.match(/[^A-Za-z]+/) === null ) || errorMessage.IsAlphabet;
}
// 半角数字のみ
export function IsNumber (value) {
return ( value.match(/[^0-9]+/) === null ) || errorMessage.IsNumber;
}
// 漢字・ひらがな・カタカナのみ
export function IsJa(value){
return ( value.match(/^[\u30a0-\u30ff\u3040-\u309f\u3005-\u3006\u30e0-\u9fcf]+$/) !== null ) || errorMessage.IsJa;
}
// 全角カナチェック
export function IsJaKatakana (value) {
return ( value.match(/^[\u30A0-\u30FF\s]+$/) !== null ) || errorMessage.IsJaKatakana;
}
// メールアドレスであるか判定
export function IsEmail (value) {
return new String(value).match(/^[A-Za-z0-9]+[\w.-]*@[A-Za-z0-9]+[\w.-]+\.[\w.-]+$/) !== null || errorMessage.IsEmail;
}
// IsPassword パスワードチェック
function IsPassword (value, reValue) {
return ( value === reValue ) || errorMessage.IsPassword;
}
/**
* [validationEach 複数検証]
* @param {type?} value [検証する対象]
* @param {Array} validations [検証内容(バリデーション↑のfunction名)]
* @return {Array} [検証結果]
* [
* true || 'message',
* true || 'message',
* ...
* ]
*/
export function ValidationEach (value, validations) {
// 検証用のバリデーションを登録します
let validationMap = {
MaxLength,
MinLength,
NotNull,
IsAlphabet,
IsJa,
IsJaKatakana,
IsNumber,
IsPassword,
IsEmail
};
// 検証結果
let ir = _.reduce(validations, (result, validation, i)=>{
let key;// 検証項目名
let val2 = null;// validationが「Object」の場合に使う
// validationがObjectの場合
if ( String(validation) === '[object Object]' ) {
key = Object.keys(validation)[0];
val2 = validation[key];
}
else {
key = validation;
}
result.push( validationMap[key](value, val2) );
return result;
},[]);
// 検証結果内容を整理して返します
// '_.without'= エラーがある場合は「true」を除外します
// '_.uniq' = 「true」が複数ある場合に1つにだけ返します
return ( _.find(ir, (e)=> e !== true ) )? _.without(ir, true) : _.uniq(ir);
}
※ lodash使ってます。es6です。