top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_1201

ログイン処理:jQuery利用したガチガチの処理終え、「新規登録」はこれでいいか?な ・・・ 【サイト構築】

 2010-01-04
 本プロジェクトにおいては、ガチガチの手書き構築。
 symfonycakePHP 利用していたので、
 久しぶりに戸惑う。
 でも、こうやって構築した方が
 身になる気もするんだよな。

 ・習作サンプルも用意してみました。
  習作サンプル


  追記に (長文ご容赦) ▼


FC2ブログランキング にほんブログ村 IT技術ブログ Webサイト構築へ ブログ王ランキング 人気ブログランキング 人気ホームページランキングへ


more

************************************************
◎ ログイン処理(新規アカウント登録)その1
  :サイト構築

************************************************


 今回は、jQuery利用した、Ajax処理により
 基礎チェック終えて、サイトにデータを送信する
 ・・・ところまで。
 ※いろいろ、欲張って学びなおしたけど。

 それでは、記録・・・


 ■フォーム用意
  ・アカウント、
  ・パスワード + 確認用再入力
  ・メールアドレス + 確認用再入力
  を用意する。
  フォーム用意:サイト構築


 ■機能実装1
  ・テキストフィールドに「デフォルト文字」入れておいて
   クリックで入力できるように消えてくれて、マウス移動すると
   また、「デフォルト文字」出てくる・・・あれ。


  ※このタイプの jQueryプラグイン
   あるのは知っているのだけど、気が多いので手間実装。


 


  □フォーム上では、
<input id="userac" name="useraccount" value="ご希望アカウント" title="ご希望のアカウントをご入力ください。" onClick="javascript:onClickInit('useraccount','',0);" onBlur="javascript:onClickInit('useraccount','',1);" type="text" maxlength="16" />
 と用意して

 

  □onClick onBlur 用意したjavascript関数を呼ぶ。
var DEFSTR_ACO = "ご希望アカウント";
var str_aco = DEFSTR_ACO;
function onClickInit(strField,opdefstr,opReset){
if(opdefstr != ''){ str_aco = opdefstr; }
var tempObj = $("input#"+strField);
var tempStr = tempObj.val();
if (tempStr == str_aco){
if (opReset == 1){ tempObj.val(str_aco);
}else{ tempObj.val(''); }
}else{
if (tempStr == ''){
if (opReset == 1){ tempObj.val(str_aco); }
}}
}
  【留意】
   ・他の処理でも使う汎用関数にしたく
    表示する文字列は、呼び出しで変えられるように処理。
    ・DEFSTR_ACO, str_aco, opdefstr
   ・ひとつの関数でオンオフを opReset で分ける

 ■機能実装2
  ・入力文字チェック、サーバーデータベースでの重複チェック
   など、すべてを、jQuery利用して
   メッセージエリアで行う。

 


  □フォーム上では、
<span id='ckmes_area1' class='ckmes_area1'>※半角英数文字の 8文字~16文字。</span>
 というエリアを用意しておき、

 

  □チェックで問題があれば、
var DEFSTR_STA = "※半角英数文字の 8文字~16文字。";
var DEFSTR_MES = "ご入力をご確認ください。";
var rtArea = "ckmes_area1";
viewMesArea(rtArea,DEFSTR_MES,DEFSTR_STA);
$("input#useraccount").focus(); return;
 とする。

 

  □用意したメッセージ用の関数は、
function viewMesArea(rtArea,sMes,defMes){
// メッセージエリア表示
$("#"+rtArea).html(sMes);
$("#"+rtArea).css({color:"#FF0000"});
$("#"+rtArea).hide().fadeIn(3 * 1000);
// 一定時間後
myTimer = $.timer(3 * 1000,function() {
// メッセージエリア初期化
$("#"+rtArea).html(defMes);
$("#"+rtArea).css({color:"#494949"});
$("#"+rtArea).hide().fadeIn(3 * 1000);
});
}
 で、ここにはひとつ jQueryプラグインを
 利用させていただいている。

jQuery Timer Plugin | EvanBot
jQuery Timer Plugin | EvanBot 先に、
 "jQuery Delay Plugin"
 というものを用意され、それを
 カスタマイズされたものの
 ようですが、とても便利。



   これで、
   ・一度アラートメッセージが表示され、
   ・しばらくすると、元のデフォルトメッセージに戻る
   部分を簡単に用意することができた。

 


 ■機能実装3
  ・サーバーデータベースでの アカウント重複チェック
   Ajax送信利用して、フォームリロード無く行う

 


  □フォーム上では、
<a href="javascript:onClickWCheck('useraccount','userpassword','ckmes_area1')">重複チェック</a>
 というリンクを用意しておき、

  □javascriptで用意した関数では、
function onClickWCheck(strField,nxtField,rtArea){
// メッセージエリア初期化
$("#"+rtArea).html(DEFSTR_STA);
$("#"+rtArea).css({color:"#494949"});

// 入力値取得
var tempObj = $("input#"+strField);
var tempVal = tempObj.val();

// エラーチェック
var strMes = "";
strMes = ckStrFields('account',tempVal,'');

// エラーセットなければ
if(strMes == ''){
var postFile = "*****.php"; // 通信先PHP
$.post( postFile, // URL
{"fld": strField, "val": tempVal}, // データ引数
function(data, status) {
var strcolor = ""; var list = Array();
if (status == "success") {
list = data.split(",");
// 応答あれば
if(list[0]!=''){
strMes = list[1];
if(list[0]==1) { strcolor = "#0058F3";
}else{ strcolor = "#FF0000"; }
if(nxtField!=''){
// メッセージエリア表示
$("#"+rtArea).html(strMes);
$("#"+rtArea).css({color:strcolor});
$("#"+rtArea).hide().fadeIn(3 * 1000);
if(list[0]!=1) { tempObj.focus();
}else{
var tempObj2 = $("input#"+nxtField);
tempObj2.focus();
}
}
}
}
},
"html" // 応答データ形式
);

}
// エラーセットあれば
if(strMes != ''){
if(nxtField!=''){
viewMesArea(rtArea,strMes,DEFSTR_STA);
tempObj.focus();
}else{ return strMes; }
}
}
  【留意】
   ・このjQueryによる入力値取得(大好き)
      "$("input#textfieldname").val();"
   ・サーバーへは、post通信行い、
      "$.post( postFile,"
   ・応答は、カンマ(,)区切りの文字列で返す
      "list = data.split(",");"
   ・問題なければ次のフィールドへ進める
      "var tempObj2 = $("input#"+nxtField); tempObj2.focus();"

 


 ■機能実装4
  ・javascriptでの基礎的な入力チェック

  □空入力 はそのままチェック


  □半角英数文字チェック
   メールアドレス文字列チェック
   として、汎用関数を用意。
function checkStr_forms(type,val){
if(type=='e_han'){ // 英数半角文字
var tmp = val.match(/[0-9a-zA-Z\+\-\/\*\,\. ]+/g);
}else{
if(type=='em'){ // メールアドレス
var tmp = val.match(/^[A-Za-z0-9]+[\w-]+@[\w\.-]+\.\w{2,}$/);
}}
if (tmp != val){ return false;
}else{ return true; }
}

 


 ■習作サンプル

jQuery利用した、新規登録フォーム習作サンプル - use JQuery -
jQuery利用した、新規登録フォーム習作サンプル - use JQuery - ・javascript部分の
  実働サンプルです。

 ・・・何かありましたら、
    お教えいただければとても
    有難いです。


commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/1201-992c4983
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。