<a href="./?page=mem_addmem" class="addmem-btn w3-button">會員註冊</a>
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">×</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> </p> </footer> </div> </div>
在 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的工作 } }); });
<?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()); } ?>
<?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); //釋放主機端暫存影像 ?>
<?php session_start(); $chk_code_input = $_POST['chk_code_input']; if( $chk_code_input == $_SESSION['imgcode'] ){ echo 1; }else{ echo 0; } ?>
<?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()); } } ?>