vueでinputタグ携帯電話番号を正則検証する

今日問題があったのは、vueでinputに正規の携帯電話番号の検証を行うことです.次は今日のコードです.jsで書きます.elementUIは使いません.コードは以下の通りです.

      

             
        
        {{hint}}
      

 

             
        
        {{tel}}
      
    

ネット上でも多くの資料を探していますが、私のシーンにはあまり適用されません.次は2つのinputラベルの正則検証です.

/* eslint-disable */
export default {
  data () {
    return {
      hintShow: false,  //      
      hint: '      ', //    
      telShow: false,  //      
      tel: '      ', //    

      /*
      *  val   ,err     , test    
      * */
      phone: {
        val: '',
        err: false,
        pass: false,
      },
      phone1: {
        val: '',
        err: false,
        pass: false,
      }
    };
  },
  methods: {
    //       
    test: function () {
      const reg = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
      if (this.phone.val == '' || this.phone.val.length <= 10 || !reg.test(this.phone.val)) {
        this.hintShow = true
        this.hint = '      '
        this.err = true
        return false

      } else {
        this.hintShow = false
        this.hint = '      '
        this.err = false
        return true
      }
    },
    teltest () {
      const reg = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
      if (this.phone1.val == '' || this.phone1.val.length <= 10 || !reg.test(this.phone1.val)) {
        this.telShow = true
        this.tel = '      '
        this.err = true
        return false

      } else {
        this.telShow = false
        this.tel = '      '
        this.err = false
        return true
      }
    },
  }
}

メソッドをmethodsに全部書いて、inputタグでピントが合わないときに直接呼び出せばいいです