読者です 読者をやめる 読者になる 読者になる

サーバー構築メモ

サーバーを構築したりWEBサイトを作ったりした際の個人的な備忘録です

PHP フォームからデータをPOSTで送信する(javascriptでのデータチェック有)

フォームからデータをPOSTで送信してそのままブラウザへ出力する。javascriptによる入力チェックも行う。

 

元になったサンプルはこちら。

入力データは、3文字から8文字までの半角英数字のみ許可

「test.php」

<?php
//フォームからのデータを受け取る
$output = false;
if (isset($_POST['action']) && $_POST['action']=='disp') {
 $output = true;
 //データチェック
 $error = IsErrFormData($_POST['data01']);
 if ($error==false) {
  $data01 = htmlspecialchars($_POST['data01'], ENT_QUOTES);
 }
}
?>
<html>
<head>
<title>フォームからデータをPOSTで送信する</title>
<script type="text/javascript">
<!--
function ChkFormData() {
 var error;
 var data01 = document.form01.data01.value;
 //データチェック
 if (data01.match(/^[a-zA-Z0-9]{3,8}$/)) error = 0;
 else error = 1;
 //エラーならアラート表示して送信キャンセル
 if (error==1) {
  alert("入力データが不正です");
  return false;
 } else {
  return true;
 }
}
//-->
</script>
</head>
<body>
 <form onSubmit="return ChkFormData();" name="form01" action="test.php" method="post">
  <input type="text" name="data01">
  <input type="hidden" name="action" value="disp">
  <input type="submit" name="submit" value="送信">
 </form>
<?php
//フォームからのデータを出力
if ($output==true) {
 if ($error==false) echo $data01;
 else echo '入力データが不正です';
}
?>
</body>
</html>
<?php
//3文字から8文字までの半角英数字か判定(エラー有ならtrue、無ならfalseを返す)
function IsErrFormData($pstr) {
 if (preg_match("/^[a-zA-Z0-9]{3,8}$/", $pstr)) return false;
 else return true;
}
?>

フォームの送信ボタンを押したとき、javascriptによる入力チェックも行うが、javascriptをOFFにしているユーザーも存在するので、必ずサーバー側でも入力チェックを行う。これにより入力データにエラーがある場合、毎回サーバーと通信しないで済むので負荷を軽減できる。

 

関連エントリーはこちら。