JavaScript+PHP5でつくる簡易バリデータ（入力検証、入力制限）；その３

前回のログのサンプルを改造して、MyValidator.class.phpを使った以下の仕様のサンプルを作った。

入力フィールドと（それに対応する）ボタンを複数個配置する。
ボタンのイベントハンドラを汎用化して、いちいち指定しなくてもいいようにする。

こうすると、スクリプトの初期処理で、一気にボタンにイベントハンドラが割り当てられて便利（そう）だ。
とはいえ、入力フィールドとボタンの関連付けをしないといけないので、（いろいろ方法はありそうだが）以下のようなルールを決めた。

ボタンのid属性値=入力フィールドのid属性値+"_button"

以下が画面の初期イメージ。

以下が、カタカナしか入力許可しないフィールドに、ひらがなを入れたときのスクリーンショット。

以下に、HTML（Javascript）の全文を示す。scriptライブラリーとして、YUI2.7.0のDomとEventを用いている。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>MyValidate</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">
/*
 * 入力検証
 *  （モジュールパターンで実装）
 */
validate = function() {
	var	Dom 	= YAHOO.util.Dom;	
	var	Event 	= YAHOO.util.Event;
		
	/**
	* Input(type=text)にフォーカスが当たったときのハンドラー
	*/
	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(type=button)がクリックされたときのハンドラー
	*/
	var onClickHdlr = function(_evt,_obj){
		
		_e = YAHOO.util.Event.getTarget(_evt)
		
		// 入力検証をするフィールドの特定
		var _bid = _e.id;
		var _id = _bid.replace(/(_button)+$/,''); // _buttonをトリムする。
		var _resId = _id + '_res';

		// 検証キーをclass属性から取得.
		if(document.all){
			//for IE
			var _keys = Dom.get(_id).getAttribute('className');
		}else{
			// for FF, Chrome, Safari
			var _keys = Dom.get(_id).getAttribute('class');
		}

		// 検証キーを取り出す
		var _keyArray = _keys.split(" ");
		
		// 検証対象を取得.
		var _str  = Dom.get(_id).value;

		// サーバーで検証
		var _url = "test_validate.php"
		for(var i = 0; i < _keyArray.length; i++){

			// class名の判別（my_isXxxxのみを選別する）
			var _idx = _keyArray[i].toLowerCase().indexOf('my_is',0);

			if(_idx != -1){
				// リクエストパラメータのセット
				var _opt = _keyArray[i].replace(/^(my_)/,''); // my_をトリムする。
				// Validator.class.phpの仕様にしたがって、パラメータを設定する。
				var _parm = 'opt='+_opt+'&'+'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){
			//alert("responseSuccess");
			var _id = _oj.argument.id;
			var _resId = _oj.argument.resId;

			// データの取得
			var _ret = _oj.responseText;
			//alert("response "+_oj.responseText);
			if(_ret.length>0){
				// エラーのハンドル（皆さん適当に）
				// 入力フィールドの色をピンクにする。
				Dom.setStyle(_id, 'background-color', 'pink');
				// エラーが複数のときは複数行にして表示する。
				if(Dom.get(_resId).innerHTML.length>0){
					Dom.get(_resId).innerHTML += ' &nbsp ' +_ret;
				}else{
					Dom.get(_resId).innerHTML = _ret;
				}
			}
		},

		// 受信失敗時の処理
		responseFailure: function(_oj){
			alert("responseFailure");
			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時のハンドラーを仕込む
			if(_inObj[i].getAttribute('type') == 'text'){
				Event.addFocusListener(_inObj[i].id, onFocusHdlr, _inObj[i]);		    
			// type=buttonには、click時のハンドラーを仕込む
			} else if(_inObj[i].getAttribute('type') == 'button'){
				Event.addListener(_inObj[i].id, 'click', onClickHdlr, _inObj[i]);		    
			}
		}
	} // initの終わり
	
	};
}();


</script> 

</HEAD>
<BODY onload="validate.init()">
<h3>
サーバーサイドでのバリデーション確認用
</h3>
<p>

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

日付のチェック；
<!--// class名に'my_isXxxx'とすると、'isXxxx'の部分がバリデータに渡されます. -->
<input id="v_date" class="ez_initguide my_isDate" type="text" 
	value="yyyy/mm/dd">
<!--// 'input(type=text)のid' + '_button' にバリデータが自動的にマップされます. -->
<input id="v_date_button" type="button" value="チェック">
<!--// 'input(type=text)のid' +'_res' にバリデータからの値が返却されます .-->
<div id="v_date_res"></div>

<br>
カタカナのチェック；
<input id="v_katakana" class="ez_initguide my_isKatakana" type="text" 
	value="カタカナで入力してください." size=50>
<input id="v_katakana_button" type="button" value="チェック">
<div id="v_katakana_res"></div>

<br>
ひらがなのチェック；
<input id="v_hiragana" class="ez_initguide my_isHiragana" type="text" 
	value="ひらがなで入力してください." size=50>
<input id="v_hiragana_button" type="button" value="チェック">
<div id="v_hiragana_res"></div>

</form>

<br>
</body>
</HTML>