完整代碼下載: 百度網盤地址 https://pan.baidu.com/s/1qFsRoODkccF1VkEsGLsQTw 提取碼 :p4zr 永久有效 有疑問可以給我發郵件:[email protected] || [email protected] 1 註冊頁面 2 登錄頁面 3 登錄成功主 ...
完整代碼下載: 百度網盤地址 https://pan.baidu.com/s/1qFsRoODkccF1VkEsGLsQTw
提取碼 :p4zr
永久有效
註意:
1 如果要正常運行此示例, 本地需要搭建伺服器 和 php 環境,不懂的自行百度啊
2 在此示例中的register.php/sendMail()函數中,發送郵件的發件人填的是我自己已經開通smtp服務後的qq郵箱號
3 如果你要把發郵件的郵箱號改成自己的, 需要登錄郵箱並開通smtp服務(免費開通的,只需要你手機驗證), 不然你的郵箱號是發送不了郵件的
4 你可以在郵箱正文中填寫併發送html格式的內容, 如果必須要郵箱驗證才能註冊帳號成功,那麼你要有一個虛擬機 或 伺服器來接收這個驗證信息
5 此示例中, 大部分信息驗證都在 伺服器語言php中進行的,當然js也可以勝任,但不安全
6 在等成功後進入index主頁面的時候, 輸出的是一個意料之外的用戶信息, 因為我懶,所以沒改就上傳了
7 還嫌我不夠羅嗦的,可以給我郵件啊, 聽我繼續啰嗦!!!
有疑問可以給我發郵件:[email protected] || [email protected]
1 註冊頁面
register.js
1 (function (){ 2 3 //if(sessionStorage.getItem("user") !== null){location.href = "index.html"; return;} 4 //實例化視圖類 5 let v = new View(); 6 7 //創建一個用戶信息對象(相當於 空模板) 8 let user = { 9 UserName:null, 10 Sex:null, 11 Email:null, 12 Password:null, 13 Like:[] 14 } 15 16 //設置boxId視圖 17 v.get("boxId").style = "width:"+v.client.w+"px; height:"+v.client.h+"px;";//定義寬高 18 19 //設置loginBoxId視圖 20 let lid = v.get("loginBoxId"); 21 let x = Math.round((v.client.w/2) - (lid.offsetWidth/2)); 22 let y = Math.round((v.client.h/2) - (lid.offsetHeight/2)) - 16; 23 lid.style = "left:"+x+"px; top:"+y+"px; visibility:visible;";//位置居中 24 25 //ajax驗證 26 //當用戶抬起鍵盤時 會執行此方法, 27 //並把用戶輸入的信息通過ajax發送到register.php進行驗證是否正確 28 //register.php 返回 1 或 true 或 0 或 false 29 let isTrue = (tar, val)=>{ 30 if(!tar || !val){return;} 31 32 new Ajax( 33 "./register.php", 34 "post", 35 "data="+JSON.stringify({tar:tar, val:val}), 36 (e)=>{ 37 let data = JSON.parse(e.target.responseText); 38 if(data.tar === "Submit"){ 39 console.log(data); 40 if(data.isTrue){location.href = "../index.html";} 41 return; 42 } 43 let ta = data.tar || tar, mes = v.get(ta + "_mes"); 44 if(data.isTrue){ 45 user[ta] = data.val; 46 mes.style = "color:green;"; 47 mes.innerHTML = "√"; 48 }else{ 49 user[ta] = null; 50 mes.style = "color:red;"; 51 mes.innerHTML = "X"; 52 } 53 } 54 ); 55 } 56 57 //綁定事件 58 v.addEvent(v.get("UserNameId"), "keyup", (e)=>{isTrue("UserName", e.target.value);}); 59 v.addEvent(v.get("SexId"), "click", (e)=>{if(e.target.name === "Sex"){user.Sex = e.target.value;}}); 60 v.addEvent(v.get("EmailId"), "keyup", (e)=>{isTrue("Email", e.target.value);}); 61 v.addEvent(v.get("PasswordId"), "keyup", (e)=>{isTrue("Password", e.target.value);}); 62 v.addEvent(v.get("LikeId"), "change", (e)=>{ 63 if(e.target.name !== "Like"){return;} 64 let key = user.Like.indexOf(e.target.value); 65 if(key !== -1){user.Like.splice(key, 1);} 66 if(e.target.checked === true){user.Like.push(e.target.value);} 67 }); 68 69 //返回按鈕 70 v.addEvent(v.get("BackId"), "click", (e)=>{ 71 history.back(); 72 }); 73 74 //郵箱驗證 完成註冊 按鈕 75 v.addEvent(v.get("DoneId"), "click", (e)=>{ 76 77 //獲取html元素對象 78 let mes_e = v.get("errorId"), mes_s = v.get("Sex_mes"), mes_l = v.get("Like_mes"); 79 80 //驗證並更新提示視圖 81 if(!user.UserName || !user.Email || !user.Password){ 82 mes_e.innerHTML = "Illegal user name or email or password!"; 83 return; 84 }else{ 85 mes_e.innerHTML = ""; 86 } 87 if(!user.Sex){ 88 mes_s.style = "color:red;"; 89 mes_s.innerHTML = "X"; 90 return; 91 }else{ 92 mes_s.style = "color:green;"; 93 mes_s.innerHTML = "√"; 94 } 95 if(user.Like.length === 0){ 96 mes_l.style = "color:red;"; 97 mes_l.innerHTML = "X"; 98 return; 99 }else{ 100 mes_l.style = "color:green;"; 101 mes_l.innerHTML = "√"; 102 } 103 104 //輸入信息完成, 把user對象發送給register.php 105 isTrue("Submit", user); 106 107 }); 108 })()
register.php
1 <?php 2 header("content-type:text/html; charset=utf-8"); 3 require_once "../php/sendMail/Smtp.class.php";//導入發送郵件類 4 5 /* 6 註冊信息驗證 7 */ 8 9 class Register{ 10 11 //驗證用戶名 12 function isUserName($data){ 13 $isData = preg_match('/[\x80-\xff\w\-]+/', $data->val); 14 $data->isTrue = $isData; 15 return $data;//返回 1 或 0 16 } 17 18 //驗證郵件_1 19 function isEmail($data){ 20 $isData = preg_match_all('/\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/', $data->val); 21 $data->isTrue = $isData; 22 return $data;//返回 1 或 0 23 } 24 25 //驗證密碼 26 function isPassword($data){ 27 $isData = preg_match("/^(\w){6,18}$/", $data->val); 28 $data->isTrue = $isData; 29 return $data;//返回 1 或 0 30 } 31 32 //發送郵件 33 function sendMail($target, $title, $value){ 34 //防止郵件註入 35 $target = filter_var($target, FILTER_SANITIZE_EMAIL); 36 if(!filter_var($target, FILTER_VALIDATE_EMAIL)){return false;} 37 //郵件配置 38 $smtpserver = "smtp.qq.com";//郵箱伺服器地址, 如果是[email protected]郵箱, 此處請更換成 smtp.163.com 39 $smtpserverport = 25;//郵箱伺服器地址 埠號 40 $smtpusermail = "[email protected]";//發件人的郵箱地址 41 $smtpemailto = $target;//收件人的郵箱地址 42 $smtpuser = "3247940050";//發件人的郵箱帳號,qq郵箱就直接填qq號 43 $smtppass = "nkcdmbuvtqbldcbj";//授權碼(在開通smtp服務的時候獲取的授權碼) 44 $mailtitle = $title;//郵件標題 45 $mailcontent = $value;//郵件內容(正文) 46 $mailtype = "HTML";//內容格式,填 TEXT 或 HTML 47 $smtp = new Smtp($smtpserver, $smtpserverport, true, $smtpuser, $smtppass);//連接 郵箱伺服器地址 48 $smtp->debug = false;//是否顯示連接信息 49 return $smtp->sendmail($smtpemailto, $smtpusermail, $mailtitle, $mailcontent, $mailtype);//發送郵件 50 } 51 52 //驗證郵件_2 53 function sel($data){ 54 $arr = file("../json/users.json");//把文件每行轉為數組例:array("文件的第一行", "文件第二行", ...) 55 foreach($arr as $v){//遍曆數組, 如果郵箱名已存在結束並返回fase 56 if(json_decode($v)->val->Email === $data->val->Email){return false;} 57 } 58 //return json_decode(file_get_contents("../json/users.json")); 59 return true; 60 } 61 62 /* 63 $data->isTrue 64 後臺把驗證的結果(false 或 true 和 0 或 1)賦給data對象下的istrue屬性 65 前臺js主要是通過 data對象下的istrue屬性 來判斷是否驗證成功 66 */ 67 function isSubmit($data){ 68 $data->isTrue = $this->sel($data);//驗證郵件 69 if($data->isTrue === true){//發送郵件驗證 70 $data->isTrue = $this->sendMail($data->val->Email, "註冊驗證", "<a href='https://github.com/'>點擊完成驗證</a>"); 71 } 72 if($data->isTrue === true){//保存用戶 73 if(file_put_contents("../json/users.json", json_encode($data)."\n", FILE_APPEND | LOCK_EX) === false){$data->isTrue = false;} 74 } 75 if($data->isTrue === true){//開啟會話, 記錄登錄信息對象 76 session_start(); $_SESSION['user'] = $data; 77 } 78 return $data; 79 } 80 81 } 82 83 //創建一個isTrue = false對象, 用作意料之外的返回數據 84 class O{public $isTrue = false;} 85 $err = json_encode(new O); 86 87 //實例化 Register 類 88 $reg = new Register; 89 90 //如果data對象下的 val屬性 等於 "[email protected]%0ACc:[email protected]"之類的字元串時 91 //在解析json的時候會拋出致命錯誤(已解決) 92 $dedata = json_decode(isset($_POST["data"]) ? $_POST["data"] : ""); 93 if(gettype($dedata) !== "object"){echo $err; return;} 94 switch($dedata->tar){ 95 case "UserName" : echo json_encode($reg->isUserName($dedata)); break; 96 case "Email" : echo json_encode($reg->isEmail($dedata)); break; 97 case "Password" : echo json_encode($reg->isPassword($dedata)); break; 98 case "Submit" : echo json_encode($reg->isSubmit($dedata)); break;//此條件為 用戶輸入完成的執行方法 99 define : echo $err; break; 100 }
視圖
2 登錄頁面
login.js
1 (function (){ 2 3 //if(sessionStorage.getItem("user") !== null){location.href = "index.html"; return;} 4 5 let v = new View(); 6 7 //boxId 8 v.get("boxId").style = "width:"+v.client.w+"px; height:"+v.client.h+"px;";//定義寬高 9 10 //loginBoxId 11 let lid = v.get("loginBoxId"); 12 let x = Math.round((v.client.w/2) - (lid.offsetWidth/2)); 13 let y = Math.round((v.client.h/2) - (lid.offsetHeight/2)) - 16; 14 lid.style = "left:"+x+"px; top:"+y+"px; visibility:visible;";//位置居中顯示 15 16 //綁定事件 17 v.addEvent(v.get("loginBoxId"), "click", (e)=>{ 18 let id = e.target.id; 19 20 if(id === "BackId"){//返回按鈕 21 history.back(); 22 23 }else if(id === "RegisterId"){//註冊按鈕 24 location.href = "../register/register.html"; 25 26 }else if(id === "LoginId"){//登錄按鈕 27 let el_err = v.get("errorId"), el_e = v.get("EmailId"), el_p = v.get("PasswordId"); 28 if(!el_e.value || !el_p.value){el_err.innerHTML = "Please fill in email address and password!"; return;} 29 //把 用填寫的郵箱地址和密碼發送給login.php進行驗證返回true 或false 30 new Ajax("./login.php", null, 31 "data="+JSON.stringify([el_e.value, el_p.value]), 32 (e)=>{ 33 if(JSON.parse(e.target.responseText) === true){ 34 location.href = "../index.html"; 35 return; 36 } 37 el_err.innerHTML = "Illegal email or password!"; 38 } 39 ); 40 } 41 }); 42 43 })()
login.php
<?php header("content-type:text/html; charset=utf-8"); /* 登錄信息驗證 返回 true 或 false */ function sel($arr){ $file = @fopen("../json/users.json", "r");//打開文件 只讀模式 while(!feof($file)){//遍歷文件 $str = fgets($file); if(!$str){continue;} $o = json_decode($str); if($o->val->Email === $arr[0] && $o->val->Password === $arr[1]){ return $o; } } fclose($file);//關閉文件 return false; } //給前端js 返回 驗證結果 function PM($data){ echo json_encode($data); } //接收一個長度為2的登錄信息數組示例:array("郵箱地址", "密碼") $data = isset($_POST["data"]) ? $_POST["data"] : ""; if($data == ""){PM(false);} $user = sel(json_decode($data));//驗證查詢 是否有此郵箱地址和對應的密碼是否正確返回布爾值 if($user){//驗證成功 session_start();//開啟會話 $_SESSION['user'] = $user;//記錄 用戶登錄信息對象 PM(true); }else{//驗證失敗 PM(false); }
視圖
3 登錄成功主頁
index.js
1 "use strict" 2 3 //載入js文件 4 loadFile(["js/func.js"], main); 5 6 //主要程式 7 function main(){ 8 //創建一個ajax請求, 前往index.php驗證用戶是否已登錄 9 //如果Ajax返回的是false說明用戶還沒有登錄成功,並前往login.html, 10 //否則ajax返回用戶信息對象 11 new Ajax("./php/index.php", null, null, (e)=>{ 12 let data = JSON.parse(e.target.responseText); 13 if(data === false){ 14 location.href = "./login/login.html"; 15 return; 16 } 17 showIndex(data.val, new View()); 18 }); 19 20 } 21 22 //創建登錄成功後的主頁內容 23 function showIndex(user, v){ 24 v.get("boxId").style = "width:"+v.client.w+"px; height:"+v.client.h+"px;"; 25 let lid = v.get("loginBoxId"); 26 let x = Math.round((v.client.w/2) - (lid.offsetWidth/2)); 27 let y = Math.round((v.client.h/2) - (lid.offsetHeight/2)) - 16; 28 lid.style = "left:"+x+"px; top:"+y+"px; visibility:visible;";//位置居中 29 30 create(v, lid, "你好: " + user.UserName); 31 create(v, lid, "我知道你的郵箱是: " + user.Email); 32 switch(user.Like.length){ 33 case 1 : 34 create(v, lid, "我知道你喜歡: " + user.Like[0]); 35 break; 36 case 2 : 37 create(v, lid, "我知道你喜歡: " + user.Like[0]); 38 create(v, lid, "還有: " + user.Like[1]); 39 break; 40 case 3 : 41 create(v, lid, "我知道你喜歡: " + user.Like[0]); 42 create(v, lid, "還有: " + user.Like[1]); 43 create(v, lid, "還有: " + user.Like[2]); 44 break; 45 default : break; 46 } 47 } 48 49 //創建html p元素 50 function create(v, fel, content){ 51 let p = v.add(fel, "p"); 52 p.innerHTML = content || ""; 53 return p; 54 }
index.php
<?php header("content-type:text/html; charset=utf-8"); session_start();//開啟會話 /* 驗證 $_SESSION["user"]會話 記錄 是否存在 返回布爾值 */ //如果$_SESSION["user"]為未定義說明用戶還未登錄成功, 返回false //否則返回 $_SESSION["user"](保存了用戶信息對象) function get(){ if(isset($_SESSION["user"])){return $_SESSION["user"];}else{return false;} } echo json_encode(get());
視圖
<?phpheader("content-type:text/html; charset=utf-8");require_once "../php/sendMail/Smtp.class.php";//導入發送郵件類
/*註冊信息驗證*/
class Register{//驗證用戶名function isUserName($data){$isData = preg_match('/[\x80-\xff\w\-]+/', $data->val);$data->isTrue = $isData;return $data;//返回 1 或 0}//驗證郵件_1function isEmail($data){$isData = preg_match_all('/\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/', $data->val);$data->isTrue = $isData;return $data;//返回 1 或 0}//驗證密碼function isPassword($data){$isData = preg_match("/^(\w){6,18}$/", $data->val);$data->isTrue = $isData;return $data;//返回 1 或 0}//發送郵件function sendMail($target, $title, $value){//防止郵件註入$target = filter_var($target, FILTER_SANITIZE_EMAIL);if(!filter_var($target, FILTER_VALIDATE_EMAIL)){return false;}//郵件配置$smtpserver = "smtp.qq.com";//郵箱伺服器地址, 如果是[email protected]郵箱, 此處請更換成 smtp.163.com$smtpserverport = 25;//郵箱伺服器地址 埠號$smtpusermail = "[email protected]";//發件人的郵箱地址$smtpemailto = $target;//收件人的郵箱地址$smtpuser = "3247940050";//發件人的郵箱帳號,qq郵箱就直接填qq號$smtppass = "nkcdmbuvtqbldcbj";//授權碼(在開通smtp服務的時候獲取的授權碼)$mailtitle = $title;//郵件標題$mailcontent = $value;//郵件內容(正文)$mailtype = "HTML";//內容格式,填 TEXT 或 HTML$smtp = new Smtp($smtpserver, $smtpserverport, true, $smtpuser, $smtppass);//連接 郵箱伺服器地址$smtp->debug = false;//是否顯示連接信息return $smtp->sendmail($smtpemailto, $smtpusermail, $mailtitle, $mailcontent, $mailtype);//發送郵件}//驗證郵件_2function sel($data){$arr = file("../json/users.json");//把文件每行轉為數組例:array("文件的第一行", "文件第二行", ...)foreach($arr as $v){//遍曆數組, 如果郵箱名已存在結束並返回faseif(json_decode($v)->val->Email === $data->val->Email){return false;}}//return json_decode(file_get_contents("../json/users.json"));return true;}/*$data->isTrue後臺把驗證的結果(false 或 true 和 0 或 1)賦給data對象下的istrue屬性前臺js主要是通過 data對象下的istrue屬性 來判斷是否驗證成功*/function isSubmit($data){$data->isTrue = $this->sel($data);//驗證郵件if($data->isTrue === true){//發送郵件驗證$data->isTrue = $this->sendMail($data->val->Email, "註冊驗證", "<a href='https://github.com/'>點擊完成驗證</a>");}if($data->isTrue === true){//保存用戶if(file_put_contents("../json/users.json", json_encode($data)."\n", FILE_APPEND | LOCK_EX) === false){$data->isTrue = false;}}if($data->isTrue === true){//開啟會話, 記錄登錄信息對象session_start(); $_SESSION['user'] = $data;}return $data;}
}
//創建一個isTrue = false對象, 用作意料之外的返回數據class O{public $isTrue = false;}$err = json_encode(new O);
//實例化 Register 類$reg = new Register;
//如果data對象下的 val屬性 等於 "[email protected]%0ACc:[email protected]"之類的字元串時 //在解析json的時候會拋出致命錯誤(已解決)$dedata = json_decode(isset($_POST["data"]) ? $_POST["data"] : "");if(gettype($dedata) !== "object"){echo $err; return;}switch($dedata->tar){case "UserName" : echo json_encode($reg->isUserName($dedata)); break;case "Email" : echo json_encode($reg->isEmail($dedata)); break;case "Password" : echo json_encode($reg->isPassword($dedata)); break;case "Submit" : echo json_encode($reg->isSubmit($dedata)); break;//此條件為 用戶輸入完成的執行方法define : echo $err; break;}