甲斐ゼミナール 請求書閲覧システム
デザイン確認用ページ

システムの流れ
画面一覧
利用者登録①(本人確認)

本人確認(氏名カナ・生年月日・口座番号下4桁)

空欄チェック(required)

全角カタカナチェック(pattern="[\u30A0-\u30FF]+")

不正入力時にエラーメッセージ表示(invalid-feedback)

補足説明テキストあり(下4桁を入力)

画面を見る
利用者登録②(ログイン情報入力)

メールアドレス・パスワード設定

目のアイコンでパスワード表示・非表示機能追加

空欄チェック(required)

メール形式チェック(type="email")

パスワード形式チェック(pattern,半角英数字8文字以上)

パスワード確認一致チェック(送信時)

コピー貼り付け禁止

画面を見る
利用者登録③(認証コード入力)

認証コード入力

認証コード再送信ボタン設置

認証コードコピペ対応仕様

認証コード再送ボタン追加

画面内完結で「認証コードを再送しました」表示

連打防止あり(2分間ボタン無効化)

画面を見る
利用者登録④(完了)

利用者登録完了画面

画面を見る
ログイン画面

保護者がログインする画面

「パスワードをお忘れの方」リンク設置

目のアイコンでパスワード表示・非表示機能追加

空欄チェック(required)

メール形式チェック(type="email")

パスワード形式チェック(pattern,半角英数字8文字以上)

Enterキーで送信可能へ

画面を見る
パスワード再設定①(メールアドレス入力)

パスワードをお忘れの方

空欄チェック(required)

メール形式チェック(type="email")

画面を見る
パスワード再設定②(認証コード入力)

パスワードをお忘れの方

認証コード再送信ボタン設置

認証コードコピペ対応仕様

認証コード再送ボタン追加

画面内完結で「認証コードを再送しました」表示

連打防止あり(2分間ボタン無効化)

画面を見る
パスワード再設定③(新パスワード入力)

新パスワード設定

目のアイコンでパスワード表示・非表示機能追加

空欄チェック(required)

パスワード形式チェック(pattern,半角英数字8文字以上)

パスワード確認一致チェック(送信時)

コピー貼り付け禁止

画面を見る
パスワード再設定④(完了)

パスワード再設定完了画面

画面を見る
ご請求書・口座振替領収証閲覧画面

ログイン後に表示される請求書・領収証

画面を見る
ログイン後、メールアドレス変更

メールアドレス変更(新メールアドレス入力)

空欄チェック(required)

メール形式チェック(type="email")

画面を見る
ログイン後、メールアドレス変更(認証コード入力)

メールアドレス変更(認証コード入力)

認証コード再送信ボタン設置

認証コードコピペ対応仕様

認証コード再送ボタン追加

画面内完結で「認証コードを再送しました」表示

連打防止あり(2分間ボタン無効化)

画面を見る
ログイン後、メールアドレス変更(完了)

ログイン後のメールアドレス変更完了画面

画面を見る
ログイン後、パスワード変更

パスワード変更(新パスワード入力)

目のアイコンでパスワード表示・非表示機能追加

空欄チェック(required)

パスワード形式チェック(pattern,半角英数字8文字以上)

パスワード確認一致チェック(送信時)

コピー貼り付け禁止

画面を見る
ログイン後、パスワード変更(完了)

ログイン後のパスワード変更完了画面

画面を見る
甲斐ゼミナール請求書閲覧システム
デザイン確認用ページ