導入している状態ならバリデーション機能が組み込まれているということなのでした。^2.4.8データ構造ここではメールアドレスとパスワードを入力するログインフォームを想定してバリデーションを設定してみます。'タイトルは必ず入力してください。'30文字以内で入力してください。'メール形式で入力してください。'パスワードは必ず入力してください。'30文字以内で入力してください。},}},}</script>loginFormformのmodelに設定するオブジェクトです。この中にinputのv-model入る値を入れます。rulesここにフォームバリデーションのルールを設定します。emailは「必須」「30文字以内」「メール形式」という3つのルールを設定してます。他にもtriggerを指定することでバリデーションのタイミングを変更することができます。下記のようにblurを指定すると、フォーカスアウト時に実行されます。'メール形式で入力してください。}コンポーネントの作成データの値をmodelに設定し、el-form-itemのpropにも設定します。el-formに:rulesを指定することでルールが適用されます。</div></template>バリデーションルールは下記のようにel-form-itemのコンポーネントタグに設定することもできます。'タイトルは必ず入力してください。'30文字以内で入力してください。'メール形式で入力してください。}]">フォーム送信時の設定これだけでもバリデーションは動作しますが、エラー時はフォーム送信できないようにしてみましょう。フォームボタンのクリックイベントにhandleLoginを指定したので、handleLoginメソッドを下記のようにします。送信処理}});}}ElementUIのバリデーションは「async-validator」というライブラリを使用しているので、詳しくは下記をご確認くだささい。REPLYNAMEE-MAILURLコードを書く場合は<pre>で囲んでください。WixこのブログではjQueryやWordPressを中心としたWeb制作関係のことを書いております。ご意見ご感想などお気軽にコンタクトフォームよりお問い合わせください。Web関係のお仕事も募集しております。