验证用户名是否存在，手机号是否匹配，进而修改密码

最新推荐文章于 2024-11-06 21:13:20 发布

weixin_30567225

最新推荐文章于 2024-11-06 21:13:20 发布

阅读量342

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhaohui123/p/7047354.html

本文介绍了一个基于HTML、CSS和PHP的网页密码修改流程，包括前端界面设计、输入验证及后端处理逻辑。前端通过表单收集用户输入，并利用jQuery进行实时验证；后端则负责验证用户名、手机号和密码的正确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../JS/jquery-3.2.0.js" type="text/javascript" ></script>
<script src="../JS/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="../css/bootstrap.min.css" />
<title>EOA修改密码</title>
<style type="text/css">
*{	
	margin:0px;
    padding:0px;
 }
#zong{
		width:100%;
		background-color:#F3F1F2 ;
	 } 
#line{width:80%; height:100px;  position:relative; border-bottom:#00F ridge 2px; margin-left:10%; background-color:#FFF;}
#logo{width:40%;height:88px;position:relative;margin-left:20px;font-size:20px;float:left;  margin-top:5px; }
#dl-btn{width:100px;height:50px;position:relative; float:left; margin-left:43%; margin-top:55px;}
a{text-decoration:none;}
a:hover{ cursor:pointer;}
#xia{ width:80%;
	  height:450px;
      background-color:#FFF;
	  position:relative;
	  margin-left:10%;
	  
	  margin-top:20px;
	  bottom:54px;
	}	 
#bd{    
		width:60%;
		height:100%;
		position:relative;
		left:200px;
		top:40px;
		font-size:18px;
		text-align:right; 
   }	 
.bt{
		width:250px;
		position:relative;	
   }
#ts{ 
		position:relative;
		bottom:26px;
		font-size:15px;
	}
#sj{
		position:relative;
		bottom:29px;
		font-size:15px;		
	}
	   
.xg{ 
		width:400px; 
	}   	 	 
</style>
</head>

<body>
<div id="zong">
	<div id="line">
        <div id="logo">
        	<img  src="../img/149731449459075b.png" style="height:86px"/>|<b>修改密码</b>
         </div>
        <div id="dl-btn">
        <a href="EOA.php"><button type="button" class="btn btn-default">返回登录</button>			       </a>
        </div>
    </div>

    <br/><br/>
    <div id="xia">
    <div id="bd">
    	<!--<form>-->
        	<div class="form-group">
            	<label class="col-sm-2 control-label font">用户名</label>
        			<div class="col-sm-10">
            			<input type="text" class="form-control bt" name="uid" id="uid" placeholder="请设置用户名"><span id="ts"></span>
        			</div>
        	</div><br/><br/><br/><br />

        
        	<div class="form-group">
            	<label class="col-sm-2 control-label font">手机号</label>
        			<div class="col-sm-10 ">
            			<input type="text" class="form-control bt" name="tel" id="tel" placeholder="可用于登录" ><span id="sj"></span>
        			</div>
        	</div><br/><br/><br/><br />

        
            
        	<button type="button" class="btn btn-primary btn-lg btn-block xg" >下一步</button>
        <!--</form>-->
    </div>
    </div>
</div>
    
</body>
<script type="text/javascript">
$("#uid").blur(function()
{
	var uid = $(this).val();
	if(uid!="")
	{
		$.ajax(
			{
				url:"Xiugai_uid.php",
				data:{uid:uid},
				type: "POST",
				dataType:"TEXT",
				success: function(data)
					{
						if(data.trim()=="OK")
						{
							$("#ts").html("用户名正确");
							$("#ts").css("color","green");
						}
						else
						{
							$("#ts").html("用户名错误");
							$("#ts").css("color","red");
						}
					}
			});
	}
	else
	{
		alert("请填写完整！");
	}

})
function checkMobile(str) {
     
    var  re = /^1\d{10}$/
    if (re.test(str)) {
		  $("#sj").html("手机号码格式正确");
		  $("#sj").css("color","green"); 
    } 
	else {
          $("#sj").html("手机号码格式错误");
		  $("#sj").css("color","red"); 
    }
}
$("#tel").blur(function(){
		var str = $(this).val();
		checkMobile(str);
})

	var uid = $("#uid").val()
	var tel = $("#tel").val()
	//if(tel!=""&&uid!="")
//	{
	$("button").click(function(){
		var uid = $("#uid").val()
		var tel = $("#tel").val()
		$.ajax({
			 url:"Xiugai_yan.php",
			 data:{uid:uid,tel:tel},
			 type:"POST",
			 dataType:"TEXT",
			 success: function(data){
				 if(data.trim()=="ok")
				　　{
				　　　　　window.location.href="xiugaiT.php"; 
				　　}
				　　else
				　　{
				　　　　alert("用户名或手机号不匹配！"); 
				　　}
	
				 }
			 })
	});
</script>
</html>

2.用户名是否存在处理页面 Xiugai_uid.php

<?php
$uid = $_POST["uid"];
require "../class/XiangMu.class.php";
$db = new xiangmu();
$sql = "select count(*) from users where uid='{$uid}'";
$arr = $db->strquery($sql);
if($arr)
{
	echo "OK";
}
else
{
	echo "NO";	
}

3. 用户名手机号是否匹配一致处理页面Xiugai_yan.php

<?php
session_start();
$uid = $_POST["uid"];
$tel = $_POST["tel"];
require "../class/XiangMu.class.php";
$db = new xiangmu();
$sql = "select tel from users where uid='{$uid}' ";
$str =$db -> strquery($sql);
if($str==$tel && !empty($tel))
{
$_SESSION["uid"] =$uid;  
 echo "ok";
}
else
{
 echo "no";
}

验证后进行下一步，修改新密码

代码如下：

xiugaiT.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<script src="../JS/jquery-3.2.0.js" type="text/javascript" ></script>
<script src="../JS/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="../css/bootstrap.min.css" />
<title>注册</title>
<style type="text/css">
*{	margin:0px;font-family:"微软雅黑"; padding:0px;}
a{text-decoration:none;}
a:hover{ cursor:pointer;}
#zong{width:100%;background-color:#F3F1F2 ; position:absolute; } 
#line{width:80%; height:100px;  position:relative; border-bottom:#00F ridge 2px; margin-left:10%; background-color:#FFF;}
#logo{width:32%;height:88px;position:relative;margin-left:20px;font-size:20px;float:left;  margin-top:5px; }
#dl-btn{width:100px;height:50px;position:relative; float:left; margin-left:50%; margin-top:55px;}
#xia{ width:80%; height:550px; background-color:#FFF; position:relative; margin-left:10%; margin-top:3px;}
#bd{    
		width:70%;
		height:100%;
		position:relative;
		left:200px;
		top:40px;
		font-size:18px;
		text-align:right; 
   }
 	 
.bt{
		width:250px;
		position:relative;
		left:40px;	
   }
#ts{ 
		position:relative;
		bottom:26px;
		font-size:15px;
	}
#sj{
		position:relative;
		bottom:29px;
		font-size:15px;		
	}
#tishi{ 
		position:relative;
		bottom:27px;
		font-size:15px;
	  }		   	   
.xg{ 
		width:400px; 
	}   	
		 	 
</style>
</head>

<body>
<?php
			
	session_start();
	if(empty($_SESSION["uid"]))
	{
		header("location:EOA.PHP");
	}
	$uid =$_SESSION["uid"];
	require "../class/XiangMu.class.php";
	$db = new xiangmu();
?>
<div id="zong">
	<div id="line">
        <div id="logo">
        	<img  src="../img/149731449459075b.png" style="height:86px"/>|<b>修改密码</b>
         </div>
        <div id="dl-btn">
        <a href="EOA.php"><button type="button" class="btn btn-default">返回登入</button>			       </a>
        </div>
    </div>
    <div id="xia">
  
       <div id="bd">
    	<!--<form>-->
        <div><input type="hidden" name="uid" id="uid" /></div> 
        <div class="form-group">
            	<label class="col-sm-2 control-label font">新  密  码</label>
        			<div class="col-xs-10">
            			<input type="password" class="form-control bt" name="pwd" id="pwd" placeholder="请设置新密码">
        			</div>
        	</div><br/><br/><br/>
            
            <div class="form-group">
            	<label class="col-sm-2 control-label font">确认密码</label>
        			<div class="col-xs-10">
            			<input type="password" class="form-control bt" name="pwd" id="pwd1" placeholder="请再次填写新密码" onkeyup="validate()"><span id="tishi"></span>
        			</div>
        	</div><br/><br/><br />
<br />
<br />

            
        	<div style="margin-left:18px"><button type="button" class="btn btn-primary btn-lg btn-block xg" id="xiugai" >修改</button></div>
        <!--</form>-->
    </div>
       
    </div>
</div>


    
</body>

</html>
<script type="text/javascript">

$("#xiugai").click(function(){
		var pwd = $("#pwd").val();
			$.ajax({
					url:"Xiugai_pwd.php",
					data:{pwd:pwd},
					type:"POST",
					dataType:"TEXT",
					success: function(data){
							if(data.trim()=="OK")
							{
								alert("修改成功！")
							}
							else
							{
								alert("修改失败！")
							};
						}
				})
			
	})
	
	
function validate() {
	
	var pwd = $("#pwd").val();
	var pwd1 = $("#pwd1").val();
<!-- 对比两次输入的密码 -->
	if(pwd == pwd1) 
	 {
		$("#tishi").html("两次密码相同");
		 $("#tishi").css("color","green");
		 $("#xiugai").removeAttr("disabled");
    }
else {
		$("#tishi").html("两次密码不相同");
		 $("#tishi").css("color","red")
		  $("#xiugai").attr("disabled","disabled");
		
 	 }
}
	

</script>

修改密码处理页面Xiugai_pwd.php

<?php
session_start();
$uid = $_SESSION["uid"];
$pwd = $_POST["pwd"];
require "../class/XiangMu.class.php";
$db = new xiangmu();
$sql = "update users set pwd='{$pwd}' where uid='{$uid}'";
if($db->query($sql,0))
{
	unset($_SESSION["uid"]);
    echo "OK";	
}
else
{
    echo "NO";
}

转载于:https://www.cnblogs.com/zhaohui123/p/7047354.html