LoginSignup
4
2

More than 5 years have passed since last update.

validationモジュールは拡張性だと思う

Last updated at Posted at 2018-03-16

バリデーションは作るアプリによって個性的なモノを用意する場合がありますね。
つまり簡単に拡張できるように作っておいた方がいいですよね。

使い方

    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です。

4
2
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2