Vueでバリデーション処理をCompoment化 メモ

Vueでのバリデーション実装要件

「Vue バリデーション」で検索をかけるとライブラリを使用する方法が多くヒットしますが、現場の方針でライブラリは極力使わないことになっているので、BootstrapとJSで実装しました。

①バリデーション用のJSファイルを作成

入力値がnullの時にはnullを返し、
チェック結果はbool型でreturnします。

export functionで定義した関数名をexport defaultでも定義してあげないと外部から呼び出せないので注意してください。
（JS不慣れな私は書き忘れててエラーで続けてて２時間くらい困りました(笑)馬鹿です(笑)）

validate.js

export default
{
    validPostal,
    validText,
    validKana,
    validTel,
    validEmail,
    validPref,
    validNumber,
    validURL
}

export function validPostal(data)  {
        if (data === null || data === undefined)
            return null;
        const reg = /^[0-9]{3}-?[0-9]{4}$/;
        return reg.test(data);
}

//日本語チェック
export function validText(text) {
    if (text === null || text === undefined) return null;
    const re = /^[ \\A-Za-z\\Ａ-Ｚａ-ｚ\\ｦ-ﾟ\u30a0-\u30ff\u3040-\u309f\u3005-\u3006\u30e0-\u9fcf]+$/;
    return re.test(text);
  }

//カナチェック
export function validKana(text) {
    if (text === null || text === undefined) return null;
    const re = /^[ \\ｦ-ﾟ\u30a0-\u30ff]+$/;
    return re.test(text);
  }

  //電話番号
  export function validTel(data) {
    if (data === null || data === undefined) return null;
    const re = /^[0-9]{2,3}-?[0-9]{3,4}-?[0-9]{3,4}$/;
    return re.test(data);
  }

  //メールアドレス
  export function validEmail(email) {
    if (email === null || email === undefined) return null;
    const re = /^(([^<>()\\[\]\\.,;:\s@"]+(\.[^<>()\\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
  }

  //都道府県
  export function validPref(data){
    if(data === null || data === undefined) return null;
    const re = /^((東京都|北海道|(?:京都|大阪)府|.{2,3}県))$/;
    return re.test(data)
  }

  //数字
  export function validNumber(data) {
    if (data === null || data === undefined) return null;
    const re = /^[0-9]+$/;
    return re.test(data)
  }

  //URL
  export function validURL(url) {
    if(url === null || url === undefined) return null
    const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/;
    return reg.test(url);
  }

②使用するVue側

１.スクリプト内で①で作ったJSファイルをインポートします。

imoirt [呼び出すときに使いたい名称]　from 'JSファイルの相対パス'

hogehoge.vue

<script>

import validate from '../store/validate'
export default { 

２.componentsでも1.でインポートした際につけた名称を定義してあげます。

hogehoge.vue

 components(){
    validate //バリデーションチェック
  },

３．今回はconputedで使用したいので呼び出してあげます。

チェックしたい値がfor文で回している連想配列の中身なので、引数で渡します。

hogehoge.vue

<b-form-input type="text" v-model="customer.Url"
                  :state="checkURL(customerStoreInfo.customerStoreUrl)"/>

computedにはそのまま引数を渡すことができないので、function内で一度returnして引数を取得します。

hogehoge.vue

computed: {
//郵便番号
    checkCustomerPostal :function() {
       return function(check){
        return validate.validPostal(check)
      }
    },
    //カナ
    checkKana :function(){
      return function(check){
        return validate.validKana(check)
      }
    },
   //URL
    checkURL :function(){
      return function(URL){
        return validate.validURL(URL)
      }
    }

バリデーションOKの時はこのような表示になります。

バリデーションNGの時はこのようになります。

今後の作業

Falseの時にメッセージを出せるようにしたいと思います。

参考リンク

Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ
JavaScript初心者でもVue.jsをはじめられます！はじめてみましょう！