vue.jsで入力されたURLの判定方法

Question

vue.jsにおいて、入力されたURLが「URLであるかどうか」を判定するには、どうのようにすれば良いでしょうか。

<template>
  <div>
    <h1>test-site</h1>
    <h5>test</h5>
    <p v-if="errors.length">
      <b>Please correct the following error(s):</b>
      <ul>
        <li v-for="(error,index) in errors" :key="index">{{ error }}</li>
      </ul>
    </p>
    <form action="" method="get" v-on:submit.prevent="submit">
      <input type="text" v-model="inputUrl" name="url" placeholder="http://example.com">
      <button type="submit">送信</button>
    </form>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      erros:[],
      inputUrl:'',
    }
  },
  methods: {
    submit(){
      if(!this.inputUrl){
        this.erros.push('ウェブサイトのURLを入力して下さい (例: http://example.com')
      }
      
    }
  },
  


}
</script>

現状、未入力の場合のバリデーションのみ実装している状態なのですが、正しい形式のURLでなかった場合もエラーメッセージを表示する形としたいと考えています。
バリデーションの形としては、スキーマ部分が「http://」もしくは「https://」であるかどうかでチェックをかけるだけで良いかなと考えています。
インターネットで調べたのですが、解決に繋がる記事が見当たらなかった為、どなたかご助言頂けましたら幸いです。

Answer 1

現状は、Vue.jsのmethodsに以下の関数を作成し、使用することでURLのバリデーションを行う形で実装する形としたいと思います。

 checkFormat(url){
      var re = /^http(|s)://.+/
      return re.test(url);
    }

Answer 2

Qiita記事が参考になりそうですね。Vueによる実装

inputにURLしか入らないようにしたい＆リアルタイムに制限をかけたい

Comments

[study_111]

ご回答ありがとうございます。
初めから入力させないように、pattern属性を使用した形にするというのも良いかもしれません。
こちらの方法も検討してみたいと思います。

[study_111]

ただ、対応していないブラウザ「https://qiita.com/ka215/items/795a179041c705bef03b#notices」もあるみたいなので、その部分は考慮し、プログラム側でもバリデーションは実装した方が良いかもしれませんね

[mako1972]

他の方の回答をお待ちくださいませ・・。

[YufanLou]

input 要素の pattern 属性は今ほぼどこにも支持されています： https://caniuse.com/#feat=input-pattern
そして、記事のように methods の opt を使っていると、pattern 属性が支持されていなくても動けます。

StackOverflowの経験によれば、記事を参考する際に、回答の中にも抜粋する方がいいと思います。

[study_111]

@YufanLouさん
ありがとうございます。
今回は、使用の問題によりpattern属性の採用は見送ることとなったのですが、mako1972さんの記事を参考にプログラム側で、正規表現を使用し、バリデーションを行うこととしたいと思います。