クライアントサイドスクリプトによる、フォームのチェック


  JavaScript によるフォームのチェック



これは、フォームがサーバに送信される直前の「イベント」を利用します

nameサーバーサイドのアプリケーションで参照する為の名称
methodGET と POST があり、大量のデータは POST でしか送れない
( URL に使用可能な文字数は最大 2,083 文字 )
action送り先( 省略すると自分自身 )
target表示するウインドウ名( _blank で 新しいウインドウ。フレームや IFRAME に対しても送れる )

  
<FORM
	name="frmMain"
	method="POST"
	action="control.php"
	target="BodyFrame"
	onSubmit='return CheckData()'
>
</FORM>
  

上記は、フォームタグの記述ですが、「onSubmit」がそのイベントです。

これによって、フォームを type="submit" のボタンか、
フォームオブジェクトの submit メソッドで送信しようとした時に、
送信前に CheckData() という関数を実行するようにする為の記述です

CheckData() の前の return は、CheckData() の戻り値を ブラウザに渡す為の記述です。
もし、CheckData() の戻り値が false であると、フォームはサーバに送信されずにキャンセルされます。
反対に、戻り値が true であればフォームは送信されます。

これを利用して、CheckData() 関数内で、入力データのチェックを行ってエラーがあれば、
関数内で return false; を実行します

  
<SCRIPT language="javascript" type="text/javascript">

// *********************************************************
// フォームのチェック
// *********************************************************
function CheckData() {

	if ( Trim(document.getElementsByName("In1Email")[0].value) == "" ) {
		alert( "メールアドレスを入力して下さい" );
		document.getElementsByName("In1Email")[0].value = "";
		document.getElementsByName("In1Email")[0].focus();
		return false;
	}

	return true;
}

function Trim( strValue ) {

	// 以下[]内の空白に見えるのは漢字スペース
	var regL = /^[ \s]+/;
	var regR = /[ \s]+$/;

	strValue = strValue.replace(regL,"");
	strValue = strValue.replace(regR,"");

	return strValue;

}

</SCRIPT>
  

これは、非常にオーソドックスなチェックサンプルです。
( このような記述を行なう事によって、最低限の問題を「エンドユーザ」に警告する事ができます。 )

しかし、ブラウザはユーザによれば、スクリプトの使用を禁止している場合もあるので、
サーバーサイドのチェックを省略してはいけません。

これらは、あくまで「ユーザサイド」の操作性を高めたり、問題を発生しにくくする事が目的です










  infoboard   管理者用   
このエントリーをはてなブックマークに追加




SQLの窓  天気  IT用語辞典
Yahoo!ニュース  マルチ辞書
PHP マニュアル  Google URL短縮 


フリーフォントWEBサービス
SQLの窓WEBサービス

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ