魁！小野の塾　小さな管理機能を作ってみようの巻　第１３話

小さな管理機能を作ってみよう　第１３話

初心者向け、PHPプログラム構築講座です。
初心者といっても、PHPの勉強を少し行い、LAMP環境が自分で構築でき、少しアプリケーションを作成しているレベルを対象とします。
まったくの初心者の場合は、わからない部分が出てくると思います。
できるだけ細かく説明は入れていきますが、説明がわからない場合は、PHPやMySQLの初心者講座をご覧ください。

対象のスキルレベル

LAMP環境の構築
PHP言語が読める
HTML, CSS, Javascriptが少しわかる
Bootstrapのドキュメントをみて、HTMLが書ける
Ajax(非同期通信)を利用したことがある
SESSIONを利用したことがある

構築環境

Windows10
XAMPP(PHP7.3.2, MariaDB 10.1.38)

ユーザ管理　編集画面

今回は、Validationのパターン部分の追加を行います。その前に 正規表現 について少し学んでいきたいと思います。
中級者以上になってくると、色々な場面で 正規表現 を、見たり、書いたりすることになります。
私もチェックをしたりすると、量指定子（数量子と表現するところもある）が抜けているなど、少し難しいのかなと感じることがあります。

参考サイトを見て下さい。サルでもわかるは、サルでもわかるのかも知れませんが、ちょっとハードルが高いかも。

※参考正規表現とは？メタ文字とサンプル一覧
※参考サルにもわかる正規表現入門
※参考基本的な正規表現一覧
※参考正規表現
※参考忘れっぽい人のための正規表現チートシート
※参考任意の文字と繰り返し(量指定子)
※参考最大量指定子と最小量指定子の考え方
※参考最先読みと後読みを使ったパターン
※参考正規表現の先読み・後読みを極める！

一通り見るとわかると思いますが、世界の皆さんは、よく使うパターンをまとめて一覧にしてウェブに上げてくれています。
そうです。考えなくてもコピペで使えるのです。なので、分からないうちはコピペで頑張りましょう。きっとそのうち目覚めます。

正規表現が正しく書けるためには、文字コードの理解や、どのように文字列処理されているのかなど、色々な知識が必用とされますので、
少しずつ知識を蓄え、経験していけばよいかと思います。（間違えた正規表現かかれるより、コピペしてあっているものが良いです。）
ただ、テストは必ずして下さい！これは絶対です！あったこともない人が書いた正規表現を鵜呑みにしてはいけないですからね。（と上司に怒られた経験があります）

チェックする内容はこちらになります。

項目名	type属性	正規パターン	内容
名前	text	.{2,}	任意の文字が２文字以上
メールアドレス	email	–	メールアドレスは正規表現では完全にチェックすることは出来ません。ブラウザのチェック任せ。
パスワード	password	(?=.?[a-z])(?=.?[A-Z])(?=.*?\d)[a-zA-Z\d]{6,}	半角で、英字の大文字、小文字、数字のいずれも含む６文字以上
電話番号	tel	\d{2,4}-?\d{3,4}-?\d{3,4}	数字２桁から４桁　-（なくても良い）　数字３桁から４桁　-（なくても良い）　数字３桁から４桁
住所	text	.{5,}	任意の文字が５文字以上

では、早速実装していきましょう。

usersEdit.html（content部分抜粋）

[html highlight=”11,21,29,39,65″] <main class="contents">
<section class="container-fluid">
<header>
<h1><i class="fas fa-id-card-alt"></i> ユーザ管理</h1>
</header>

<form class="needs-validation" novalidate>
<div class="row">
<div class="col-lg mb-3">
<div class="form-floating">
<input type="text" class="form-control" id="name" placeholder="名前を入力してください。" pattern=".{2,}" required>
<label for="name">名前</label>
<div class="valid-feedback">正しい入力です</div>
<div class="invalid-feedback">正しく入力してください</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg mb-3">
<div class="form-floating">
<input type="email" class="form-control" id="mail" placeholder="メールアドレスを入力してください。" required>
<label for="mail">メールアドレス</label>
<div class="valid-feedback">正しい入力です</div>
<div class="invalid-feedback">正しく入力してください</div>
</div>
</div>
<div class="col-lg mb-3">
<div class="form-floating">
<input type="password" class="form-control" id="passwd" placeholder="パスワードを入力してください。" pattern="(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)[a-zA-Z\d]{6,}" required>
<label for="passwd">パスワード</label>
<div class="valid-feedback">正しい入力です</div>
<div class="invalid-feedback">正しく入力してください(英数大文字・小文字、半角数字いずれも含む６文字以上)</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg mb-3">
<div class="form-floating">
<input type="tel" class="form-control" id="phone" placeholder="電話番号を入力してください。" pattern="\d{2,4}-?\d{3,4}-?\d{3,4}" required>
<label for="phone">電話番号</label>
<div class="valid-feedback">正しい入力です</div>
<div class="invalid-feedback">正しく入力してください</div>
</div>
</div>
<div class="col-lg mb-3">
<div class="form-floating">
<select class="form-select" id="dept" required>
<option value="">選択してください</option>
<option value="1">経理</option>
<option value="2">人事</option>
<option value="3">総務</option>
<option value="4">営業第１課</option>
<option value="5">営業第２課</option>
<option value="6">営業第３課</option>
</select>
<label for="dept">所属部署</label>
<div class="valid-feedback">正しい入力です</div>
<div class="invalid-feedback">正しく入力してください</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg mb-3">
<div class="form-floating">
<input type="text" class="form-control" id="address" placeholder="住所を入力してください。" pattern=".{5,}" required>
<label for="address">住所</label>
<div class="valid-feedback">正しい入力です</div>
<div class="invalid-feedback">正しく入力してください</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg mb-3">
<button class="btn btn-success"><i class="far fa-check-circle"></i> 登録</button>
</div>
</div>
</form>