Vue お問い合わせフォーム

Project setup

yarn install

Compiles and hot-reloads for development

yarn run serve

動作確認

動作確認ページ↓にアクセス

sugasaki vue form test

お問い合わせボタンを押下

バリデーション

• 名前(姓名)
  • 名前は２文字以上、100文字以下で入力
• ふりがな(姓名)
  • 名前は２文字以上、100文字以下で入力
  • ひらがなのみ入力を許可
• メールアドレス
  • メールアドレスが入力されている
  • メールアドレス＠xxxx.com、xxxx.jp　等メールアドレス形式になっていること
• 郵便番号
  • ハイフンを入れて７桁で入力
• 電話番号
  • ハイフン入れずに電話番号を入力 その他
• 問い合わせ件名
  • 件名は5文字以上、100文字以下
• 問い合わせ内容
  • 内容は5文字以上、1000文字以下
• 個人情報の保持の同意
  • チェックボックスがONになっている

確認画面

確認画面に、フォームで入力した値が表示されること 不正な文字が入力されていればサニタイズされていること 画面右側に送信するJSONが表示されていること

完了画面

画面にフォームで入力した値が表示されること 画面右側に送信したJSONが表示されていること

Console.log で送信データが確認できます

送信データ

callPostApi axios data

応答レスポンス

axios response=