【Vue.js】入力フォームの文字数制限

Javascript用フレームワーク「Vue.js」で入力フォームの文字数制限を実装する方法をソースコード付きでまとめました。

入力フォームの文字数制限

Javascript用フレームワーク「Vue.js」で入力フォームに入力された文字数が、1~10字以外ならエラーメッセージを表示させてみます。

サンプルコード

サンプルプログラムのソースコードです。

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<!-- Vue.js の読み込み -->
<pre title="https://cdn.jsdelivr.net/npm/vue"></pre>

</head>
<body>

<div id="input-area">
  <input type="text" v-model="name">
  <div class="error" v-if="error.require">1文字以上入力してください</div>
  <div class="error" v-if="error.tooLong">文字が長すぎます(10文字以内)</div>
</div>

<pre title="./js/main.js"></pre>
</body>
</html>

js/main.js

var app = new Vue({
  el: '#input-area',
  watch: {
    name: function(newVal, oldVal) {
      this.error.require = (newVal.length < 1) ? true : false; // 最低文字数(1文字以上)
      this.error.tooLong = (newVal.length > 11) ? true : false; // 最大文字数(10文字まで)
    }
  },
  data: {
    name: 'アルトリア',
    error: {
      require: false,
      tooLong: false
    }
  }
});

関連ページ

【Vue.js入門】使い方・サンプル集
Vue.jsの使い方を入門者向けにサンプルコード付きでまとめました。
【TypeScript入門】使い方まとめ
TypeScriptの基礎文法、使い方について入門者向けにまとめました。
WEB開発入門速報 |

コメント