WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

5-4. 會員的申請註冊

講義參考用,要活用變化,或許要修改喔~

(1) 在 mem_login.php 中「會員註冊」按鈕的連結

<a href="./?page=mem_addmem" class="addmem-btn w3-button">會員註冊</a>

(2) 在 mem_addmem.php 設計會員註冊的表單

HTML 的設計部份

<form method="post" action="" class="mem-addmem-area">
 
  <input type="text" name="mem_mail" class="mem_mail" 
         placeholder="請輸入EMail為帳號..." required>
 
  <input type="text" name="mem_name" class="mem_name" 
         placeholder="請輸入名稱..." required>
 
  <input type="password" name="mem_pwd" class="mem_pwd" 
         placeholder="請輸入密碼 (6~20個英數字或符號)...." required>
 
  <input type="password" name="confirm_pwd" class="confirm_pwd" 
         placeholder="請再一次輸入相同密碼" required>
 
  <input type="text" name="chkcode" class="chkcode" 
         placeholder="請輸入 0~9 的驗證碼" required>
 
  
<img src="" class="chkcodeimg" alt=""> <a href="javascript:;" class="re-chkcode">重讀驗證碼</a>
  <input type="submit" class="submit-btn" value="" /> <input type="hidden" name="form-name" value="addmem-form">  
<div class="msg_mail">message</div> <div class="msg_pwd">message</div> <div class="msg_confirm_pwd">message</div> <div class="msg_chkcode">message</div>
  </form>

CSS 的設計部份

<style>
  .mem-addmem-area { max-width: 400px; margin: 20px auto 0; height: 560px;
    background: url(../img_layout/register.png) no-repeat center top; position: relative; }
  .mem-addmem-area input, .mem-addmem-area a, 
  .mem-addmem-area img, .mem-addmem-area div { position: absolute; }
 
  .mem-addmem-area input { background-color: transparent!important; 
    border: none; width: 335px; max-width: 100%; margin-left: 8.7%; padding: 3px 5px; }
 
  .mem-addmem-area .mem_mail    { top: 100px; }
  .mem-addmem-area .mem_name    { top: 168px; }
  .mem-addmem-area .mem_pwd     { top: 236px; }
  .mem-addmem-area .confirm_pwd { top: 305px; }
  .mem-addmem-area .chkcode     { top: 373px; }
  .mem-addmem-area .chkcodeimg  { top: 415px; margin-left: 8.7%; display: block; }
  .mem-addmem-area .re-chkcode  { top: 450px; margin-left: 8.7%; }
 
  .mem-addmem-area div { margin-right: 8%; width: 92%; text-align: right;
    color: red; letter-spacing: 0; font-size: 15px; }
  .mem-addmem-area .msg_mail        { top: 77px; }
  .mem-addmem-area .msg_pwd         { top: 212px; }
  .mem-addmem-area .msg_confirm_pwd { top: 282px; }
  .mem-addmem-area .msg_chkcode     { top: 352px; }
 
  .str1, .str0 { display: inline-block; width: 20px; height: 10px; margin-right:3px; }
  .str1 { background-color: blue; }
  .str0 { background-color: lightgray; } 
 
  .mem-addmem-area .submit-btn { 
    background: url(../img_layout/register_btn.png) transparent!important;
    width: 170px; height: 60px; top: 460px; right: 10px; margin: 0; cursor: pointer; }
 
  .info-content p { margin: 1em }
</style>

最後送出表單時如果還有訊息顯示, 則設計一個彈出的區塊

<div id="info-modal" class="w3-modal">
  <div class="w3-modal-content w3-animate-top w3-card-4">
    <header class="w3-container w3-pink"> 
      <span onclick="document.getElementById('info-modal').style.display='none'" 
            class="w3-button w3-display-topright w3-padding w3-xlarge">&times;</span>
      <p class="w3-text-white w3-center w3-padding w3-xlarge">申請表單填寫有錯!請檢查!</p>
    </header>
    <div class="w3-container w3-center info-content">
      <!-- 顯示錯誤訊息 -->
    </div>
    <footer class="w3-container w3-pink">
      <p>&nbsp;</p>
    </footer>
  </div>
</div>

(3) 在 check_mem_register.js 設計檢查表單中各欄位的工作

js 資料夾中新增一個 check_mem_register.js 檔案

$(document).ready(function(){	
  //變數設定為各個要被檢查的物件------------------------------------------
  var chk_mail         = $(".mem_mail");      //帳號
  var chk_pwd          = $(".mem_pwd");       //密碼
  var chk_confirm_pwd  = $(".confirm_pwd");   //密碼再次輸入
  var chk_code         = $(".chkcode");       //驗證碼的輸入
 
  //變數設定為各個檢查後的結果--------------------------------------------
  var test_mail        = false;  //設定帳號的輸入是否正確,預設為否
  var test_pwd         = false;  //設定密碼的輸入是否正確,預設為否
  var test_confirm_Pwd = false;	 //設定確認密碼的輸入是否正確,預設為否
  var test_chk_code    = false;  //設定驗證碼的輸入是否正確,預設為否
 
  //變數設定為 msg 顯示的位置--------------------------------------------
  var msg_mail         = $('.msg_mail');
  var msg_pwd          = $('.msg_pwd');
  var msg_confirm_pwd  = $('.msg_confirm_pwd');
  var msg_chkcode      = $('.msg_chkcode');
 
  //變數設定為 msg 顯示時輔助的設定--------------------------------------
  var msg_blue_start   = '<span style="color:blue">';
  var msg_blue_end     = '</span>';
  var m1               = '<span class="str1"></span>';
  var m0               = '<span class="str0"></span>';
 
  //==========檢測帳號=================================================================
  //當游標離開帳號欄位時
  chk_mail.bind("blur",function(){
    //假如欄位內的值不是空的
    if($(this).val()!=""){
      var chk_mail_val = $(this).val();	//取得目前輸入的內容值
      //以 reg 變數設定檢查E-Mail格式的正則表達式(描述字元規則的檢查物件)
      var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z]+$/;
 
      //以 reg 物件檢查 chk_mail_val, 符合規則得到true
      if( !reg.test(chk_mail_val) ){
        $(msg_mail).html('帳號格式不符合E-Mail!');
        test_mail = false;
      }else{
 
//使用AJAX技術取得外部mem_chk_member.php來處理判斷帳號-------------------- $.ajax({ //呼叫 mem_chk_member.php 進來工作, 以POST方式傳入 chk_mail_val 變數的值 url : 'mem_chk_member.php' ,type :'post' ,data :{ mem_mail:chk_mail_val }   //完成ajax的工作後, 執行以下function---------------------------------- }).done(function(msg){ //mem_chk_member.php完成工作會回傳值, 以 msg 收下回傳的值 //console.log('=========='+msg); if(msg==1){ //當收到的值==1, 表示資料庫中已有此帳號 $(msg_mail).html('帳號已存在,不能使用!'); test_mail = false; }else{ $(msg_mail).html(msg_blue_start+'帳號可以使用!'+msg_blue_end); test_mail = true; } });//done end ajax end
}//if reg chk end }//if($(this).val()!="") end });//blue end   //當游標點入帳號欄位時 chk_mail.bind("focus",function(){ $(msg_mail).html(''); //將訊息區塊的內容清除 });     //==========檢查密碼============================================================ //當游標在密碼欄位,並且鍵盤有按下放開時 chk_pwd.bind("keyup",function(){ var strength=0; //strength變數負責密碼正確時的積分 checkStrength(chk_pwd.val()); //將密碼欄位的值傳給checkStrength函數執行函數內的工作   function checkStrength(pwd){ //假如密碼欄位內容值的長度小於6 if(pwd.length<6){ $(msg_pwd).html('密碼未達6個字元(應輸入6~20字元)!'); test_pwd=false; //設定test_pwd變數為false否定(負責判斷密碼是否正確) } //假如密碼欄位內容值的長度大於20 else if(pwd.length>20){ $(msg_pwd).html('密碼超過20個字元(應輸入6~20字元)!'); test_pwd=false; //設定密碼格式不正確 } else{ //表示密碼格式正確, 設定pdTest變數記錄密碼格式正確 test_pwd=true; strength += 1; //strength變數累加1,表示積分有1分 //假如密碼內容包含有英文字母時,積分再加1分 if (pwd.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) { strength += 1 } //假如密碼內容包含有英文字母及數字時,積分再加1分 if (pwd.match(/([a-zA-Z])/) && pwd.match(/([0-9])/)) { strength += 1 } //假如密碼內容包含有特殊符號時,積分再加1分 if (pwd.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) { strength += 1 } //假如密碼內容包含有二個以上的特殊符號時,積分再加1分 if (pwd.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,",%,&,@,#,$,^,*,?,_,~])/)) { strength += 1 }   //判斷strength變數記錄積分 switch(strength){ case 1: //表示積分為1分時 $(msg_pwd).html(msg_blue_start+ '密碼強度: '+msg_blue_end+m1+m0+m0+m0+m0); break; case 2: //表示積分為2分時 $(msg_pwd).html(msg_blue_start+ '密碼強度: '+msg_blue_end+m1+m1+m0+m0+m0); break; case 3: //表示積分為3分時 $(msg_pwd).html(msg_blue_start+ '密碼強度: '+msg_blue_end+m1+m1+m1+m0+m0); break; case 4: //表示積分為4分時 $(msg_pwd).html(msg_blue_start+ '密碼強度: '+msg_blue_end+m1+m1+m1+m1+m0); break; case 5: //表示積分為5分時 $(msg_pwd).html(msg_blue_start+ '密碼強度: '+msg_blue_end+m1+m1+m1+m1+m1); break; } } } }); //當游標點入密碼欄位時 chk_pwd.bind("focus",function(){ $(msg_pwd).html(''); //將訊息區塊的內容清除 });     //==========二次密碼核對=================================================== function chk2pwd(){ if(chk_confirm_pwd.val()==chk_pwd.val()){ $(msg_confirm_pwd).html(msg_blue_start+'密碼相符!'+msg_blue_end); test_confirm_Pwd=true; } else{ $(msg_confirm_pwd).html('密碼不符!'); test_confirm_Pwd=false; } }   chk_pwd.bind('keyup',function(){ if( chk_confirm_pwd.val()!='' ){ chk2pwd(); } });   chk_confirm_pwd.bind("keyup",function(){ if( chk_pwd.val()!='' && chk_confirm_pwd.val()!='' ){ chk2pwd(); } });     //==========重讀驗證碼===================================================== $('.re-chkcode').on('click',function(){ $('.chkcodeimg').attr('src','../shared/chkcode_img_create.php'); $(msg_chkcode).html(''); //將訊息區塊的內容清除 test_chk_code = false; });     //==========圖形驗證碼核對================================================= chk_code.bind("keyup",function(){ if( chk_code.val()!='' ){ var chk_code_input = $(this).val(); //取得目前內容   $.ajax( { //要載入的是chkcode_img_check.php, 以POST方式傳入chk_code_input變數的值 url:"../shared/chkcode_img_check.php" ,type:"POST" ,data:{chk_code_input:chk_code_input} } ).done(function(msg){ //處理完成後執行以下function函數 if(msg==1){ $(msg_chkcode).html(msg_blue_start+'驗證碼正確!'+msg_blue_end); test_chk_code=true; //變數記錄帳號不正確 } else{ $(msg_chkcode).html('驗證碼不正確!'); test_chk_code=false; //變數記錄帳號是正確的 } }); }else{ $(msg_chkcode).html(''); } });       //==========按下註冊鈕時的判斷========================================== $(".mem-addmem-area").bind("submit",function(){ //當4個test變數皆為true, 表示各欄位的檢查皆過關 if( test_mail && test_pwd && test_confirm_Pwd && test_chk_code ){ return true; //傳回true, 表示進行submit的工作, 也就示傳出表單 } else{ //否則表示有任何一個錯誤時, 顯示訊息提示 var result = ''; var msg2_mail = '<p>帳號必須以EMail格式申請!</p>'; var msg2_pwd = '<p>密碼必須以6~20個字元填寫!</p>'; var msg2_confirm_pwd = '<p>確認密碼必須 = 密碼的輸入!</p>'; var msg2_chkcode = '<p>必須依左下方的數字圖案填寫驗證碼!</p>';   if(!test_mail) { result+=msg2_mail; } if(!test_pwd) { result+=msg2_pwd; } if(!test_confirm_Pwd) { result+=msg2_confirm_pwd; } if(!test_chk_code) { result+=msg2_chkcode; }   $('#info-modal .info-content').html(result); $('#info-modal').css('display','block');   return false; //傳回false, 表示不進行submit的工作 } });   });

(4) 在 mem_chk_member.php 檢查帳號 E-Mail 是否已申請

<?php
require_once('../shared/conn_pdo.php'); 
 
try {
  $sql_str = "SELECT * FROM member WHERE mem_mail = :mem_mail";
  $stmt = $conn->prepare($sql_str);
 
  $mem_mail = $_POST['mem_mail'];
  $stmt->bindParam(':mem_mail',$mem_mail);
  $stmt->execute();
 
  $total = $stmt->rowCount();  //計算出查詢結果的總筆數
 
  //回傳總筆數, 如果有查詢到符合的資料, 則會得到1
  echo $total;
} 
catch ( PDOException $e ){
  die("ERROR!!!: ". $e->getMessage());
}
?>

(5) 在 shared 資料夾中的 chkcode_img_create.php 產生圖形驗證碼圖案

<?php
//產生新4個長度的整數驗證碼
session_start();    //啟動 session
$number = '';       //存放答案的變數
$number_len = 4;    //變數內容的長度(答案的長度)******
//$stuff = '123456789123456789123456789123456789123456789123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
$stuff = '1356724890';  //抽樣來源******
$stuff_last = strlen($stuff) - 1;    //抽樣來源$stuff最後一個字元的索引號碼
 
for ($i = 0; $i < $number_len; $i++) {  //這個迴圈代表抽幾次
  $number .= substr($stuff, mt_rand(0, $stuff_last), 1);
  //抽答案 連接進來 取得字串中局部字元(字串, 取隨機值(0,$stuff最後一個字元的索引號碼), 取出一個字元 ) 
}
 
//產生session變數存放答案
$_SESSION['imgcode']=$number;
 
//產生驗證碼圖片
//$img = imagecreate(99,32);      //寬99,高32******
$img = imagecreatetruecolor(99, 30);
 
$black = imagecolorallocate($img, 0x36, 0x29, 0x56);     //背景色, 0x表示16進位編碼, 表示:紅36綠29藍56
$white = imagecolorallocate($img, 0xff, 0xff, 0xcc);     //前景色******
imagefill($img, 0, 0, $black);
 
//載入字體
$font = imageloadfont('gjun.gdf');
//將4位元整數驗證碼繪入圖片
imagestring($img, $font, 10, 2, $number, $white);
//imagestring($img, 5, 5, 2, $number, $white);
//imagestring(影像物件, 字體大小, padding-left, padding-top, $number, $white);  //******
 
// 輸出圖片
header("Content-type: image/png");
imagepng($img);      //送出PNG影像
imagedestroy($img);  //釋放主機端暫存影像
?>

(6) 在 shared 資料夾中的 chkcode_img_check.php 檢查圖形驗證碼是否正確

<?php
session_start();
$chk_code_input = $_POST['chk_code_input'];
 
if( $chk_code_input == $_SESSION['imgcode'] ){
  echo 1;
}else{
  echo 0;
}
?>

(7) 在 mem_addmem.php 上方加入新增申請會員資料的程式

<?php
require_once('../shared/conn_pdo.php');
include_once('../shared/assist.php');
 
if( isset($_POST['form-name']) && $_POST['form-name']=='addmem-form' ){
  try{
    $sql_str = "INSERT INTO member (mem_mail, mem_name, mem_pwd, mem_chkcode)
                VALUES (:mem_mail, :mem_name, :mem_pwd, :mem_chkcode)";
    $stmt = $conn->prepare($sql_str);
 
    $mem_mail = $_POST['mem_mail'];
    $mem_name = $_POST['mem_name'];
    $mem_pwd  = $_POST['mem_pwd'];
 
    
$mem_chkcode = ''; $mem_chkcode_len = 6; $stuff = '0123456789'; $stuff_last = strlen($stuff) - 1; for ($i = 0; $i < $mem_chkcode_len; $i++) { $mem_chkcode .= substr($stuff, mt_rand(0, $stuff_last), 1); }
  $stmt->bindParam(':mem_mail' ,$mem_mail); $stmt->bindParam(':mem_name' ,$mem_name); $stmt->bindParam(':mem_pwd' ,$mem_pwd); $stmt->bindParam(':mem_chkcode' ,$mem_chkcode);   $stmt->execute();   header('Location:./?page=mem_addmem_ok');   } catch (PDOException $e ){ die("Error!: ". $e->getMessage()); } } ?>

 

go TOP