読者です 読者をやめる 読者になる 読者になる

Motomichi Works Blog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

vue.js 2.x その0008 テキストフィールドに数字だけ入力を許可する (郵便番号フィールド)

参考にさせて頂いたページ

HTML5におけるinput要素のpattern、type属性のおさらい - Qiita

サンプルソース

以下のように書いてみました。

<div id="vue-app">
  <h1>Vue.jsのサンプル 静的なページ</h1>
  <input type="text" v-model="postcode1">
  -
  <input type="text" v-model="postcode2">
<!--/#vue-app--></div>

<script src="js/vue.js"></script>
<script>
var vm = new Vue({
  el: '#vue-app',

  data: {
    postcode1: '',
    postcode2: '',
  },

  watch: {
    postcode1: function(val){
      var num = this.trimNumber(val);
      num = num.substr(0, 3);
      this.postcode1 = num;
    },
    postcode2: function(val){
      var num = this.trimNumber(val);
      num = num.substr(0, 4);
      this.postcode2 = num;
    },
  },

  methods: {
    trimNumber: function(val){
      var regExp = /[0-90-9]+/;
      var matchResult = val.match(regExp);
      return matchResult === null ? '' : matchResult[0];
    },
  },
});
</script>