Javascript+PHP5で禁則処理をする

Ajax XHR Javascript YUI2.7.0 MyConverter PHP

2009/5/27 ; 機能追加しました。（こちら）

===========================
クライアントサイド（＝Javascriptのみ）での禁則処理を書いてみたので、同じ検証をAjax(XMLHttpRequest)を経由してサーバーサイドでの検証の書いてみた。
実際には、こっちを使うことになるだろうなー。

初期画面のスナップショットは以下。


仕様＆動きはクライアントサイド（MyConverter.js）の場合と同じで、入力文字列内にある、以下の文字を「■」で置換する。


以下が、文字列を置換したときのスナップショット。入力フィールドに入力をして、フォーカスを外すと、AjaxでPHPプラグラムを呼び出して禁則文字を置換する。


置換を行うPHPプログラムは、クラス（MyConverter.class.php）とした。

<?php
/**
 * MyConverter.class.php
 * 
 * (C) 2009, tetsuya.odaka(EzoGP).
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 *      http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* 
 * データコンバート用Class
	 * 
 * author；		t.odaka
 * date;		2009/4/23
 * 
*/

class MyConverter {

	/* 
	 * プロパティー
	 *  適当に書き換えてください。
	*/
	var $_illegalChars = '/[&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;〜]+/u';
    var $_replaceChars = '■';
	
    /* 
	 * デフォルトのコンストラクタ 
	 */
	function __construct() {
	}

    /* 
	 * 禁則文字の置換メソッド(UTF-8のみ)
	 *   パラメータ
	 * 	 $_str		:   禁則文字があるかもしれない文字列
	 *   戻り値		:   置換後の文字列
	 */
	function convertIllegal($_str){
		// 置換
		mb_regex_encoding('UTF-8');
		$_ret = preg_replace($this->_illegalChars, 
						$this->_replaceChars, $_str);
						
		return $_ret;
	}

	/* 
	 * サニタイズ
	 *   入力値のサニタイズを行う
	 *   パラメータ
	 * 	 $_str		:   検証する文字列
	 *   $_encode   :	エンコーディング
	 * 
	 */
	function sanitize($_str, $_encode){
		$_ret = htmlentities($_str,ENT_QUOTES,$_encode);
		return $_ret;
	}
}
?>


Ajaxのリクエストは、一旦、以下のPHPプログラムで受け取られて、MyCoverter.class.phpに渡される。

<?php
/* MyConverter.class.phpを使ったサンプル
	      
		author	; t.odaka
		date	; 2009/4/23

*/

include("../Myznala/MyConverter.class.php");
require("../Myznala/debugLog.php");

switch($_SERVER['REQUEST_METHOD']) {
	case 'GET'	: $rMethod = &$_GET; break;
	case 'POST'	: $rMethod = &$_POST; break;
	default:
}

// MyConverterをインスタンス化する。
$cnvObj = new MyConverter();

$val = $rMethod['val'];
$val = mb_convert_encoding($val, "UTF-8", "auto");

// サニタイズ
$val = $cnvObj->sanitize($val,"UTF-8");

// 禁則文字の処理
$ret = $cnvObj->convertIllegal($val);

// 結果の返却
header("Content-Type:text/html");
echo $ret;

?>


スナップショットのHTML（＋Javascript）は以下の通り。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>MyConverter</TITLE>

<style type="text/css">

input.ez_initguide {
	/* grey */
    color:#808080;
}

</style>
<!-- 読み込むjs --> 
<script type="text/javascript" src="../scripts/lib/yui/build/yahoo/yahoo-min.js">
</script>
<script type="text/javascript" src="../scripts/lib/yui/build/yahoo-dom-event/yahoo-dom-event.js">
</script>
<script type="text/javascript" src="../scripts/lib/yui/build/connection/connection-min.js" >
</script>

<script type="text/javascript" src="../scripts/myznala.js">
</script> 

<script type="text/javascript">
/*
 * コンバート検証
 *  （モジュールパターンで実装）
 */
validate = function() {
	var	Dom 	= YAHOO.util.Dom;	
	var	Event 	= YAHOO.util.Event;
		
	/**
	* Inputにフォーカスが当たったときのハンドラー
	*/
	var onFocusHdlr = function(_evt,_obj) {

		// 初期値（入力ガイド）の場合だけ、入力値を消す。
		//  Dom.getStyleColor（）は
		//    rgb(128,128,128); mozilla, chrome, 
		//    #808080; IE7 
		//  と異なった戻り値となる。
		// _objは,HTMLInputElement;
		
		_e = YAHOO.util.Event.getTarget(_evt)
		var _id = _e.id;
		var _resId = _id + '_res';
		
		var _fColor=Dom.getStyle(_id, 'color');
		if( _fColor == 'rgb(128, 128, 128)' ||
				_fColor == '#808080'){ // for IE
			Dom.get(_id).value="";
		}
		// 入力フィールドの色を白にする。
		Dom.setStyle(_id, 'background-color', 'white');
		// 入力フィールドの文字の色をグレーから黒に変える
		Dom.setStyle(_id, 'color', 'black');
		// メッセージフィールドを消す
		Dom.get(_resId).innerHTML="";
	};

	/**
	* Inputからフォーカスが外れたときのハンドラー
	*/
	var onBlurHdlr = function(_evt,_obj){
		
		_e = YAHOO.util.Event.getTarget(_evt)
		var _id = _e.id;
		var _resId = _id + '_res';
		
		// 検証対象を取得.
		var _str  = Dom.get(_id).value;

		var _url = "test_convert.php"
		// MyConverter.class.phpの仕様にしたがって、パラメータを設定する。
		var _parm = 'val='+_str;
		var _arg ={
				'id': _id,
				'resId': _resId
			};
		// 戻ってきたときのために、エレメントのidをセットする。
		ajaxCallback.argument = _arg;
	
		// ajaxでコンバート
		YAHOO.util.Connect.asyncRequest('POST',_url,
								ajaxCallback, _parm);
	};
		
	/*
	 * Ajaxハンドラー
	 *  
	 */
	var ajaxHandlers =　{
		
		// 受信成功時の処理
		responseSuccess: function(_oj){
			var _id 	= _oj.argument.id;
			var _resId 	= _oj.argument.resId;
			// データの取得
			var _ret 	= _oj.responseText;
			if(_ret.length>0){
				// エラーが複数のときは複数行にして表示する。
				if(Dom.get(_resId).innerHTML.length>0){
					Dom.get(_resId).innerHTML += ' &nbsp ' +_ret;
				}else{
					Dom.get(_resId).innerHTML = _ret;
				}
			}
		},

		// 受信失敗時の処理
		responseFailure: function(_oj){
			var _id 	= _oj.argument.id;
			var _resId 	= _oj.argument.resId;

			var _ret = 'ステータス: ' + _oj.status + 'ステータステキスト: ' +
							_oj.statusText + '読み込みに失敗しました。';
			// エラーのハンドル（皆さん適当に）
			// 入力フィールドの色をピンクにする。
			Dom.setStyle(_id, 'background-color', 'pink');
			Dom.get(_resId).innerHTML = _ret;
		}
	};

	/*
	 * コールバック成功/失敗時の振り分け
	 *  
	 */
	var ajaxCallback =
	{
		success: ajaxHandlers.responseSuccess,
		failure: ajaxHandlers.responseFailure,
		cache: false,
		scope: ajaxHandlers,
		argument: null
	};
	
	return {

	/**
	* 初期処理
	*/
    	init: function() {
			// HTMLInputElementの配列を取得する。
			var _inObj = document.getElementsByTagName('input');
			for(var i = 0; i < _inObj.length; i++){
				// type=textに、focusとblurにイベントを仕込む
				if(_inObj[i].getAttribute('type') == 'text'){
					Event.addFocusListener(_inObj[i].id, onFocusHdlr, _inObj[i]);		    
					Event.addBlurListener(_inObj[i].id, onBlurHdlr, _inObj[i]);		    
				}
			}
		} // initの終わり
	};
}();

</script> 

</HEAD>
<BODY onload="validate.init()">
<h3>
サーバーサイドでのコンバート確認用
</h3>

<form method="post" action='#'>
<!--// 入力検証項目 -->

入力；
<input id="text1" class="ez_initguide" type="text" size=50	
	value="入力してください." />
<div id="text1_res"></div>

</form>


<br>
</body>
</HTML>