Vue.js テキストフォームにバリデーションをかける

Vue.js テキストフォームにバリデーションをかける

Vue.jsで、テキストフォームにバリデーションをかけるサンプルコードを記述してます。 「vue3」を使用してます。

環境

  • OS windows10 pro 64bit
  • Vue.js 3.0.0
  • Apache 2.4.43
  • ブラウザ chrome 92.0.4515.107

テキストフテキストフォームにバリデーション

文テキストフォームに入力された文字列を表示させるには、「watch」を使用します。

以下は、テキストフォームに文字を入力すると、入力された値を監視して、バリデーションをかけるサンプルコードとなります。

※「vue3」は「cdn版」、デザインは「semantic-ui」を使用してます。

バリデーションされていることが確認できます。