html css js php ajax,基于原生的 html css js php ajax做的一个 web登录和注册系统

最新推荐文章于 2022-12-21 21:51:28 发布

脱衣有肉

最新推荐文章于 2022-12-21 21:51:28 发布

阅读量281

点赞数

文章标签： html css js php ajax

基于原生的 html css js php ajax做的一个 web登录和注册系统

完整代码下载：百度网盘地址 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 还嫌我不够罗嗦的，可以给我邮件啊，听我继续啰嗦！！！

有疑问可以给我发邮件：3247940050@qq.com || weihexin123@qq.com

1 注册页面

1 (function(){2

3 //if(sessionStorage.getItem("user") !== null){location.href = "index.html"; return;}

4 //实例化视图类

5 let v = newView();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;";//定义宽高

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;";//位置居中

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 newAjax(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 })()

1 <?php2 header("content-type:text/html; charset=utf-8");3 require_once "../php/sendMail/Smtp.class.php";//导入发送邮件类

5 /*

6 注册信息验证7 */

9 classRegister{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";//邮箱服务器地址, 如果是xxx@163.com邮箱，此处请更换成 smtp.163.com

39 $smtpserverport = 25;//邮箱服务器地址端口号

40 $smtpusermail = "3247940050@qq.com";//发件人的邮箱地址

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->isTrue64 后台把验证的结果(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, "注册验证", "点击完成验证");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(newO);86

87 //实例化 Register 类

88 $reg = newRegister;89

90 //如果data对象下的 val属性等于 "someone@example.com%0ACc:person2@example.com"之类的字符串时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 登录页面

1 (function(){2

3 //if(sessionStorage.getItem("user") !== null){location.href = "index.html"; return;}

5 let v = newView();6

7 //boxId

8 v.get("boxId").style = "width:"+v.client.w+"px; height:"+v.client.h+"px;";//定义宽高

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;";//位置居中显示

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 })()

header("content-type:text/html; charset=utf-8");/*登录信息验证

返回 true 或 false*/

functionsel($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 返回验证结果

functionPM($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"

3 //加载js文件

4 loadFile(["js/func.js"], main);5

6 //主要程序

7 functionmain(){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, newView());18 });19

20 }21

22 //创建登录成功后的主页内容

23 functionshowIndex(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;";//位置居中

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 functioncreate(v, fel, content){51 let p = v.add(fel, "p");52 p.innerHTML = content || "";53 returnp;54 }

index.php

header("content-type:text/html; charset=utf-8");

session_start();//开启会话

/*验证 $_SESSION["user"]会话记录是否存在

返回布尔值*/

//如果$_SESSION["user"]为未定义说明用户还未登录成功，返回false//否则返回 $_SESSION["user"](保存了用户信息对象)

functionget(){if(isset($_SESSION["user"])){return $_SESSION["user"];}else{return false;}

}

echo json_encode(get());

视图

/*注册信息验证*/

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";//邮箱服务器地址, 如果是xxx@163.com邮箱，此处请更换成 smtp.163.com$smtpserverport = 25;//邮箱服务器地址端口号$smtpusermail = "3247940050@qq.com";//发件人的邮箱地址$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, "注册验证", "点击完成验证");}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属性等于 "someone@example.com%0ACc:person2@example.com"之类的字符串时 //在解析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;}

原文链接:https://www.cnblogs.com/weihexinCode/p/12340033.html

如有疑问请与原作者联系

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com

特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

脱衣有肉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html css js php ajax,基于原生的 html css js php ajax做的一个 web登录和注册系统

基于原生的 html css js php ajax做的一个 web登录和注册系统完整代码下载：百度网盘地址 https://pan.baidu.com/s/1qFsRoODkccF1VkEsGLsQTw提取码：p4zr永久有效注意：1 如果要正常运行此示例，本地需要搭建服务器和 php 环境，不懂的自行百度啊2 在此示例中的register.php/sendMail()函数中，发送邮件的...
复制链接

扫一扫