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 } } });
– | 関連ページ |
---|---|
1 | ■【Vue.js入門】使い方・サンプル集 |
2 | ■Javascript入門 サンプル集 |
3 | ■Node.js入門 |
コメント