クッキー、PHP、のlocalStorageを通じて達成するために、ログイン登録機能

その他 2019-06-29 01:49:06 訪問数: null

1.cookie簡単なログイン・レジスタ

登録機能：

<body>
	用户名：<input type="text" id="uname" /></br>
	密    码：<input type="text" id="upwde" /></br>
	<input type="button" value="注册" id="reg">
</body>

<script>
     reg.onclick =  function(){
    		 let userJson = {
	           			 "uname" : uname.value,
	            		"upwd"   : upwd.value
				}
				document.cookie = "userinfo"+JSON.stringify( userJson);
				location.href = "login.html"
     }
</script>

ログイン機能：

<body>
		用户名 ： <input type="text" id="uname" /><br>
		密　码 ： <input type="text" id="upwd" /><br>
		<input type="button" value="登录" id="login"/>
	</body>

<script>
	//页面加载取出cookie数据
	window.onload = function(){
		let str = document.cookie;   //取出的数据是字符串
		//userinfo={"uname":"13233333333","upwd":"222"}; aa=90; hh=09
		let arr = str.split("; ");
		//['aa=90','userinfo={"uname":"13233333333","upwd":"222"}','hh=09']
		let userTxt = "";
		for( let i = 0 ; i  < arr.length ; i++ ){
			let item = arr[i].split("=");
			if( item[0] == "userinfo" ){
				userTxt = item[1];//{"uname":"13233333333","upwd":"222"}
			}
		}
		let userJson = JSON.parse( userTxt );
		//登录功能实现
		login.onclick = function(){
			if( uname.value == userJson.uname && upwd.value == userJson.upwd ){
				alert( "登录成功" );
			}else{
				alert( "登录失败" );
			}
		}
	}

クッキー機能パッケージ

//设置cookie
function setCookie(key,value,day){
	if( day ){
		let now = new Date();
		now.setDate( now.getDate() + day );
		document.cookie = `${key}=${value};expires=${ now }`;
	}else{
		document.cookie = `${key}=${value}`;
	}
}
//获取cookie
function getCookie(key){
	let str = document.cookie;
	if( str ){ //如果有cookie
		str = str.replace(/\s/g,"");
		let arr = str.split(";");
		for( let i = 0 ; i  < arr.length ; i++ ){
			let item = arr[i].split("=");
			if( item[0] == key ){
				return item[1];//返回该key对应的value值
			}
		}
	}
	return "";//没有cookie 返回一个空字符串
}
//删除cookie  将值设置为空
function removeCookie(key){
	setCookie( key , "" , -1 );
}

2.localstorageログイン登録機能を実現

登録機能

<body>
		手机号 ：<input type="text" id="tel" /><br>
		密　码 ：<input type="text" id="pwd" /><br>
		<input type="button" value="注册" id="reg" />
	</body>

reg.onclick = function(){
	//正则验证手机号
	let regTel = /^1[3578]\d{9}$/;    /以13|5|7|8开头的11位数字
	let telStr = tel.value;
	if( !regTel.test(telStr) ){
			alert("输入不合法")；
			return false；
		}
	//密码
	let regPwd = /^.{6,}$/;
	let pwsStr = pwd.value;
	if( !regPwd.test( pwsStr ) ){
		alert( "密码不合法" );
		return false;
	}
	
	//如果手机号和密码都合法 开始存储数据
	let userObj = {
		"tel" : telStr,
		"pwd" : pwsStr
	}
	//存数据，存数据时将json对象转换成字符串
	localStorage.setItem( "userInfo" , JSON.stringify( userObj ) );
	//页面跳转
	location.href = "login.html";
}

ログ機能

	 <body>
		手机号 ：<input type="text" id="tel" /><br>
		密　码 ：<input type="text" id="pwd" /><br>
		<input type="button" value="登陆" id="login" />
	</body>

window.onload = function(){
		//先取出数据
		let userText = localStorage.getItem( "userInfo" );
		let userJson = {};
		if( userText != null ){
		//把存进去的数据转化成对象
			userJson = JSON.parse( userText );
		}
		login.onclick = ()=>{
			//取出用户输入的用户名和密码
			let telStr = tel.value;
			let pwdStr = pwd.value;
			if( telStr == userJson.tel && pwdStr == userJson.pwd ){
				alert( "登陆成功" );
			}else{
				alert( "登陆失败" );
			}
		}
	}

3.localstorageログイン登録を実現

達成するための登録機能

	    <body>
	      <form action="register.php" method="post">
	        			邮　箱：   <input type="text" name="email" id="email"/><br>
	        			密　码：   <input type="text" name="upwd" id="upwd" /><br>
	        					<input type="submit" value="注册"/>
	        		</form>
	    </body>

	    <script>
	    
		    let flagEmail = null;
		    	email.onblur = function(){
		    		let reg = /@/;
		    		if( reg.test(this.value)){
		    			flagEmail = true;
		    		}else{
		    			flagEmail = false;
		    			alert("非合法邮箱")
		    		}
		    	}
		    	
		    	let flagPwd = null;
		    	upwd.onblur = function(){
		    		let reg = /\w{6,18}/
		    		if( reg.test( this.value)){
		    			flagPwd = true;
		    		}else{
		    			flagPwd = false;
		    			alert("密码不安全")
		    		}
		    	}
		    	
		    	//form表单传值
		    	let oForm = document.forms[0]
		    	oForm.onsubmit = function(){
		    		if(flagEmail && flagPwd ){
		    			return true;
		    		}else{
		    			return false;
		    		}
		    	}
	    </script>

PHPファイル

<?php
	include "public.php";
	//1.接收数据
	$email = $_POST["email"];
	$upwd = $_POST["upwd"];
	
	//先查询邮箱在数据库中是否存在
	$sqlSel = "select * from users where email = '$email'";
	$res = mysql_query( $sqlSel);
	$arr = mysql_fetch_array($res);
	if( $arr ){
		echo "<script>alert('邮箱已被注册');location.href = 'register.html'</script>";
	}else{
		$sql = "insert into users (`email`,`upwd`) values( '$email','$upwd' )";	
		$row = mysql_query( $sql );
		if( $row ){
			echo "<script>alert('注册成功'); location.href = 'login.html'</script>";
		}else{
			echo "<script>alert('注册失败'); location.href = 'register.html'</script>";
		}
	}
	
	/*include "public.php";
	//1、接收数据
	$email = $_POST["email"];
	$upwd = $_POST["upwd"];
	 
	//先查询邮箱email在数据库中是否存在  
	$sqlSel = "select * from users where email = '$email'";
	//mysql_query() 函数执行一条 MySQL 查询。
	$res = mysql_query( $sqlSel );
	//mysql_fetch_array() 函数从结果集中取得一行作为关联数组，或数字数组，或二者兼有
	//返回根据从结果集取得的行生成的数组，如果没有更多行则返回 false
	$arr = mysql_fetch_array( $res );
	if( $arr ){ //数组存在 说明邮箱已经被注册
		echo "<script>alert('该邮箱已经被注册');location.href='register.html';</script>";
	}else{
		//第四步 ： 编写sql语句  注册功能--insert
		$sql = "insert into users(`email`,`upwd`) values('$email','$upwd')";
		
		//第五步 ： 执行sql语句
		$row = mysql_query( $sql ); //返回受影响的行数
		//3、返回结果
		if( $row ){
			echo "<script>alert('注册成功');location.href='login.html';</script>";
		}else{
			echo "<script>alert('注册失败');location.href='register.html';</script>";
		}
	}
	*/
	
?>
<!--
	排错：
		1、确认数据库是否存在
		2、确认sql语句是否正确（数据是否接到   语法是否有问题）
		3、如果数据能插入到数据库  但是没有提示，检查返回结果的 字符串是否正确
	-->

ログ機能

<body>
		<form action="login.php" method="post">
			邮　箱：   <input type="text" name="email" /><br>
			密　码：   <input type="text" name="upwd" /><br>
			<input type="submit" value="登录"/>
		</form>
	</body>

PHPファイル

<?php
	//引入外部文件
	include "public.php";
	$email = $_POST["email"];
	$upwd = $_POST["upwd"];
	
	$sql = "SELECT * FROM `users` WHERE  `email` = '$email'";
	$res = mysql_query( $sql );
	$arr = mysql_fetch_array( $res );
	if( $res){
		if( $arr["upwd"] == $upwd){
			echo "<script>alert('登录成功');location.href = 'index.php?email=$email';</script>";
		}else{
			echo "<script>alert('密码错误');location.href = 'login.html';</script>";
		}
	}else{
		echo "<script>alert('用户名不存在');location.href = 'login.html'</script>";
	}
	
	/*
	//引入外部的php文件
	include "public.php";
	
	//1、接收数据
	$email = $_POST["email"];
	$upwd = $_POST["upwd"];
	//2、处理数据
	
	//第四步 ： 编写sql语句  登陆功能--select
	$sql = "SELECT * FROM `users` WHERE `email`='$email'";
	
	//第五步 ： 执行sql语句  mysql_query执行查询操作时，返回一个资源类型， 返回一个结果集合
	$res = mysql_query($sql);  
	
	//取出资源类型中的数据  取出结果集中的数据  mysql_fetch_array()  一次只能取一行数据 并返回一个数组
	$arr = mysql_fetch_array( $res );
	
	//3、返回结果
	if( $arr ){//如果数组存在 说明用户名是存在
		if( $arr["upwd"] == $upwd ){//判断密码是否相等
			//登录成功  跳转到学生成绩的列表上
			echo "<script>alert('登录成功');location.href='index.php?email=$email';</script>";
		}else{
			echo "<script>alert('密码错误');location.href='login.html';</script>";
		}
	}else{
		//用户名不存在
		echo "<script>alert('用户名不存在');location.href='login.html';</script>";
	}*/

おすすめ

転載: blog.csdn.net/ZHANGJIN9546/article/details/93629882
おすすめ
LFOSSA Yuanlaisusu オープン コース | クラウド ネイティブの未来をマスターする: CNCF 認定資格と試験準備のヒントの包括的なガイド
ランキング
[ブリックジャワ]学ぶための5分、算術演算子
英国のエッセイを書くには、次の点に注意してください。
【質疑応答シリーズ】バックエンドから返されるjsonの出力をフォーマットし、コードを強調表示する方法
イベントが発生したYunqi 2019会議、？
非常に使いやすいAndroid 6.0の許可申請ツールを推奨
インターセプトし、使用にVueの-CLI3 axiosルート
CentOS Stream 9 でピーナッツ シェルをインストールして使用し、イントラネットに侵入して Web サイトを構築する方法
CreditEaseマイクロタスクスケジューリングサービスプラットフォームの構築の練習|シェアを記録
WrapPanelのWPFのレイアウト
keras 深層学習フレームワークは、畳み込みニューラル ネットワーク cnn を通じて手書き数字認識を実現します
アーカイブ
もっと
2024-04-26(22)
2024-04-25(31)
2024-04-24(30)
2024-04-23(31)
2024-04-22(5)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(31)

コードワールド

© 2018 codetd.com