なぜフォームは入力を疑うのか
名前の欄に何も書かずに送信したり、年齢に「あ」と書く人がいます。いたずらのときも、うっかりのときもあります。
入力を確かめることを、バリデーションと言います。確かめないと、壊れたデータが保存されてしまいます。
このレッスンのゴール
メモ
フォームの入力を確かめるルールを書き、誤りを分かりやすく伝えられる。
重要な言葉
| ことば | いみ | れい |
|---|---|---|
| バリデーション | 入力が決まりに合っているかを確かめること | |
| フォーム | 名前などを入力して送るための画面の部品 | |
| クライアント側 | ブラウザーの中で動いて、すぐに確かめる側 | |
| サーバー側 | サーバーで動いて、最後に必ず確かめる側 | |
| エラーメッセージ | 何が間違いかを使う人に伝える文 | |
| 必須 | 空のままでは送れない欄 | required |
学生が入力するセルは、このプレビューでは空白です。
確かめる場所は二つある
ブラウザーの中で確かめると、使う人はすぐに間違いに気づけます。でも、これは親切のためだけです。
悪い人は、ブラウザーを通さずに直接リクエストを送れます。だから、サーバー側でも必ずもう一度確かめます。
例：二つの確かめ方
| クライアント側 | サーバー側 | |
|---|---|---|
| どこで動く | ブラウザーの中 | サーバーの中 |
| 役目 | すぐ知らせる親切 | 壊れたデータを止める守り |
| 省いてよいか | 省ける | 省いてはいけない |
学生が入力するセルは、このプレビューでは空白です。
確かめることは四種類ある
空でないか、型が合っているか、範囲の中か、形が合っているかです。
年齢なら、空でなく、数字で、13から120の間、という具合に重ねます。順番に確かめ、最初の間違いで教えます。
例：年齢の欄の確かめ方
| 入力 | 空か | 数字か | 範囲か | 結果 |
|---|---|---|---|---|
| （何も無し） | 空 | 入力してください | ||
| abc | 空でない | 数字でない | 数字で入力してください | |
| 12 | 空でない | 数字 | 13より小さい | 範囲の外 |
| 16 | 空でない | 数字 | 範囲の中 | 通る |
学生が入力するセルは、このプレビューでは空白です。
データベースに式を聞く
PGPASSWORD=shop psql -h db -U shop -c "SELECT 'bread' AS name, 280 AS price;"ここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。
@が入っているか調べる
PGPASSWORD=shop psql -h db -U shop -c "SELECT '[email protected]' LIKE '%@%' AS has_at;"ここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。
データベースも確かめてくれる
二つ目の式は、文字に「@」が入っていれば t（真）を返します。データベースにも、同じ種類の確かめを持たせられます。
アプリとデータベースで二重に守ると、片方に抜けがあっても止められます。
良いエラーメッセージとは
エラーメッセージは、使う人が次に何をすればよいかを伝えます。「エラーです」だけでは、何を直せばよいか分かりません。
「年齢は13から120の間にしてください」のように、決まりそのものを書くと、すぐ直せます。
よくある間違い
注意
ブラウザーで確かめたから安全だと考えることです。サーバー側の確認を省くと、直接送られたデータを止められません。
さらに挑戦：電話番号の確認
phone の欄を確かめる関数を足してみましょう。数字だけで、10文字か11文字なら通します。
日本の電話番号はハイフンを抜くと10文字か11文字です。ハイフンを許すかどうかも、自分で決めて書きます。