# 勉強会　入力検証「バリデーション」とは？

## まずは、プログラムの構造について

システムは必ず、「入力」→「処理」→「出力」の構造を持っています。
この入力検証は、「入力」の部分でデータが正しいかを評価する仕組みです。

## ”フォーム検証”とは？

- 必須入力項目の設定
- 電話番号の入力形式の確認
- 3桁の番号の後に「-」があるか？
- 数字以外の文字が入力されていないか？
- メールアドレスの入力形式の確認
- パスワードなどの最低入力文字数の確認

## なぜ？検証する必要があるのか

- 正しいデータを、正しい形式で入力してほしい
- ユーザーからのデータが誤った形で入力された場合、アプリケーションの振る舞いに影響を与える
- ユーザーのアカウントを保護する
- 最低入力文字数など、ユーザーの行動に制約をつけることでアカウントを保護できる
- 自分たちを守る
- 悪意のあるユーザーのデータ入力から保護する
- システムが適切に扱えるデータ形式として入力を受け取る

## 検証するレイヤーで”振る舞い”が異なる

### クライアントサイド検証

> データがサーバーに送信される前に検証を実施できるので、すぐに反応を返せる

### サーバーサイド検証

> フォームが送信されるまで結果を返せないので、入力項目を全て埋めないと、間違えている箇所が分からない

安全を考え、フロント側とバックエンド側で入力チェックを実装することが理想

もっと深く知りたい人は、複数バリデーションの種類が存在するので、興味があれば

- 入力バリデーション
- ロジックバリデーション
- 出力バリデーション

このようなキーワードで調べると良いかもしれません。

# validation 入力チェックを作ってみる

### 簡易Web サーバーを作成
chrome で簡単にWebサーバーを作れる便利機能

[Web Server For chrome](https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=ja&
)

### 作業ディレクトリを作成

cd ~/
cd Documents
mkdir iz_study_group
touch index.html
touch main.js
touch style.css
echo 'hello javascript' >> index.html

## Web サーバーが表示するディレクトリを指定する

<font color=red>**CHOOSE FOLDER** で、~/Documents/iz_study_group を指定する </font>


## ブラウザでサーバーに接続する

- chromeのURL入力欄に「localhost:8887」 と入力する

> hello javascript が表示されていれば OK

<font color= "red">vscode で公開ディレクトリにあるファイルを編集できる状態にしよう </font>

## html でフォームを作成してみよう

## javascript で入力フォームのチェックをしよう！

入力フォームへの値をリアルタイムで検証し、値が正しいか否かを確認する

> htmlからの入力を受けて、値が正しいかを確認する関数群

電話番号が正しい値か確認する
*入力値は「-」で区切られていない、数字のみを正しい値とする

メールアドレスが正しい値か確認する

パスワードの最低入力文字数を確認する