[ Vue ] vee-validateで入力内容が電話番号かどうかのバリデーションを自作する

vee-validate で入力した内容が電話番号かどうかのバリデーションを行ったのでメモしておきます。

let telephone = {
    getMessage(field,args) {
      return '電話番号は ✗✗✗-✗✗✗✗-✗✗✗✗,または10桁か11桁の数字で半角入力してください';
    },
    validate(value){
      let pattern;
      if (value.indexOf('-') ===  -1){
        // ハイフン無し
        pattern = /^\d{10}$|^\d{11}$/
      }else{
        // ハイフンあり
        pattern = /^\d{2,5}-\d{1,4}-\d{4}$/;
      }
      return pattern.test(value);
    }
  };

Validator.extend('telephone',telephone);

あとは

<input type="text" name="tel" v-validate="'telephone'" placeholder="電話番号を入力"> <div v-if="errors.has('tel:telephone')">{{errors.first('tel:telephone')}}</div>

で入力内容が電話番号かどうかのバリデーションが行えます。

Related Contents

Pickup Contents