Skip to content

Latest commit

 

History

History
120 lines (96 loc) · 4.18 KB

3.md

File metadata and controls

120 lines (96 loc) · 4.18 KB
Raw
layout title
default
STEP2-3.入力チェックを作ってみる

STEP2-3.入力チェックを作ってみる

前回の例ではIDやパスワードにあらゆる文字が使えていたので、それを半角英数字に制限し、さらに文字数も制限してみようと思います。チェックはJavaScriptとPHPで2回行います。JavaScriptで行うのはページ遷移無しでチェックしたほうがユーザーにとって親切であるからです。しかし、POSTメソッドの送り方を知っている人にとってはJavaScriptのチェックは簡単に抜けられるため、PHPでもチェックする必要があるのです。

また、前回の課題であったファイル分割についても一例として示しておきます。

auth.php

<?php

//認証に必要な機能をまとめたファイル

$salt = "mwefCMEP28DjwdW3lwdS239vVS";

function connect_mysql(){
  return new mysqli('localhost', 'root', '', 'board');
}

function hash_password($password){
  return md5($password . $salt);
}

?>

register.php

<?php

//auth.phpの読み込み
require_once("auth.php");
$mysqli = connect_mysql();

$status = "none";

if(!empty($_POST["username"]) && !empty($_POST["password"])){
  //正規表現でユーザ名のチェック
  if(!preg_match('/^[0-9a-zA-Z]{2,32}$/', $_POST["username"]))
    $status = "error_username";
  //パスワードのチェック
  else if(!preg_match('/^[0-9a-zA-Z]{8,32}$/', $_POST["password"]))
    $status = "error_password";
  else{
  	$password = hash_password($_POST["password"]);
    $stmt = $mysqli->prepare("INSERT INTO users VALUES (?, ?)");
    $stmt->bind_param('ss', $_POST["username"], $password);
    if($stmt->execute())
      $status = "ok";
    else
      $status = "failed";
  }
}

?>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>新規登録</title>
    <script src="http:https://code.jquery.com/jquery-2.0.0.min.js"></script>
    <script src="register_check.js"></script>
  </head>
  <body>
    <h1>新規登録</h1>
    <?php if($status == "ok"): ?>
      <p>登録完了</p>
    <?php elseif($status == "failed"): ?>
      <p>エラー：既に存在するユーザ名です。</p>
    <?php elseif($status == "none"): ?>
      <form method="POST" action="register.php">
        ユーザ名：<input type="text" name="username" />
        パスワード：<input type="password" name="password" />
        <input type="submit" value="登録" />
      </form>
    <?php else: ?>
      <p>
        JavaScriptのチェックを抜けてPHPのチェックに引っかかった場合に
        表示されるメッセージ（普通はありえない）
      </p>
    <?php endif; ?>
  </body>
</html>

register_check.js

$(function(){
  //submitしたときに呼び出される関数を設定
  //falseを返すとキャンセルされる
  $("form").submit(function(){
    if(!$("input[name=username]").val().match(/^[0-9a-zA-Z]{2,32}$/)
    || !$("input[name=password]").val().match(/^[0-9a-zA-Z]{8,32}$/)){
      alert("入力エラー");
      return false;
    }
    return true;
  });
});

jQueryのval関数はそのDOM要素のvalue属性の値を返します。

一応、正規表現の解説です。分からなくても問題ありません。

/^[0-9a-zA-Z]{8,32}$/

まず^と$で囲んでいるのは先頭から末尾まで全て一致させるためです。[]で囲まれたものはそのうちのどれか1文字が一致すればよいという意味で、ここで半角英数字のみに制限しています。{8,32}は直前の文字が8文字以上32文字以下続いているという意味で、ここで長さを制限しています。

[課題]JavaScriptのチェックを抜けてみよう
実際に「JavaScriptのチェックを抜けてPHPのチェックに引っかかった場合に表示されるメッセージ（普通はありえない）」を表示させて、PHPのチェックの必要性を確認しましょう。例えば、他のページのフォームからこのページへPOSTするなどの方法があります。