<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.12.3.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
user-select: none;
}
.box{
width: 400px;
height: 300px;
margin: 100px auto;
border: 1px solid;
border-radius: 15%;
}
.box .innerbox{
width: 240px;
margin-left:100px ;
position: relative;
top: 80px;
}
.box .textOne{
display: inline-block;
width: 70px;
height: 26px;
text-align: right;
}
.box input{
display: inline-block;
width: 100px;
height: 20px;
margin-left: 2px;
cursor: pointer;
}
.box .yanzhengma{
display: inline-block;
margin-bottom: 2px;
}
.box button{
text-align: center;
position: relative;
margin-top: 10px;
margin-left: 40px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<div class="innerbox">
<span class="textOne">账号：</span><input type="text"><br>
<span class="textOne">密码：</span><input type="text"><br>
<span class="textOne">验证码：</span><input type="text"><div class="yanzhengma"></div><br>
<button>登录</button>
<button>注册</button>
</div>
</div>
<script>
var yanzhengmaText=document.querySelectorAll('input')[2];
var $buts=$('button');
//验证码判断
//创建验证码
function getRandomNumber(min,max) {
return Math.floor(Math.random()*(max-min)+min);
}
function yanzhengma(length){
var yanzhengmaInner='';
var characterDic =
'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (i=0;i<length;i++){
var index=getRandomNumber(0,62);
var zifu=characterDic[index];
yanzhengmaInner+=zifu;
}
return yanzhengmaInner;
//必须用return来使生成的验证码返回到调用者
}
var yanZ= yanzhengma(4);
console.log(yanZ);
var yanzheng=document.querySelector('.yanzhengma');
yanzheng.innerHTML=yanZ;
yanzheng.style.cssText='background-color:gray;width:60px;line-height:22px; text-align: center;margin-left:1px;vertical-align: bottom;';
//验证码判断
var yanzhengmaSpan=document.querySelector('.yanzhengmatiishi');
// console.log(yanzhengmaText);
// console.log(yanzheng);
/*yanzhengmaText.onblur=function () {
var yanzhengmaTextneirong=yanzhengmaText.value;
if (yanzhengmaTextneirong==yanZ){
yanzhengmaSpan.innerHTML='验证码正确';
yanzhengmaSpan.style.cssText='color:green;font-size:10px;';
yanzhengmaText.setAttribute('class','borderGreen');
}
else {
yanzhengmaSpan.innerHTML='验证码不正确，请区分大小写';
yanzhengmaSpan.style.cssText='color:red;font-size:10px;';
yanzhengmaText.setAttribute('class','borderRed');
}
}*/
//验证码判断
//创建验证码
//点击登录验证验证码
$buts.eq(0).click(function () {
/*var yanzhengmaTextneirong=yanzhengmaText.value;
if (yanzhengmaTextneirong==yanZ){
alert('验证码正确');
/!* yanzhengmaSpan.innerHTML='验证码正确';
yanzhengmaSpan.style.cssText='color:green;font-size:10px;';
yanzhengmaText.setAttribute('class','borderGreen');*!/
}
else {
alert('验证码不正确，请区分大小写');
/!*yanzhengmaSpan.innerHTML='验证码不正确，请区分大小写';
yanzhengmaSpan.style.cssText='color:red;font-size:10px;';
yanzhengmaText.setAttribute('class','borderRed');*!/
}*/
// 传递前端数据到php文件
$.ajax({
type:'post',
url:'4.1phplogin.php',
data:'json',
data:{
loginName:$('input').eq(0).val(),
loginPassword:$('input').eq(1).val()
},
success:function (res) {
// console.log(res);
if(res.return1==0){
alert('登录成功！');
}else if(res.return1==1){
alert('登陆失败，账号或密码错误');
}else{
alert('网络连接失败');
}
}
})
})
</script>
</body>
</html>老师，这个是php文件
<?php
/*$username=$_POST['loginName'];
$paswword=$_POST['loginPassword'];
$success=array('msg'=>'ok');*/root
$con=mysqli_connect('localhost','root','','beixidb');
//var_dump($con);
if($con){
mysqli_query($con,'set names uft8');
mysqli_query($con,'set character_set_client uft8');
mysqli_query($con,'set character_set_results uft8');
$sql="select * from stu where 1";
$result=$con->query($sql);
// echo($result->num_rows);//有行数显示
if($result->num_rows>0){
$info=[];
for($i=0;$row=$result->fetch_assoc();$i++){
$info[$i]=$row;
}
$flag=0;
for($j=0;$j<count($info);$j++){
if($info[$j]['name']=='$username'){
if($info[$j]['password']=='$paswword'){
$success['return1']=0;
$flag=1;
break;
}
}
}
if($flag==0){
$success['return1']=1;
}
else{
$success['return1']=1;
}
}
}else{
$success['return1']=2;
}
//返回给前台
echo json_encode($success);
?>
麻烦您了，老师
京公网安备 11011402011233号