怎么实现登录，怎么判断登录的内容跟注册的内容一样，看一下注释是在这里判断吗
来源：2-10 脚本
慕仰8079247
2022-01-07 10:15:33
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div class="rigster">
<p class="title" id="title">
<span>登录</span>
<span class="current">注册</span>
</p>
<div class="form">
<div>
<span>+86</span>
<input type='text' name="user" id="user" placeholder="请输入注册·手机号码" autocomplete="off"/>
<i id="user_icon"></i>
<p class="info" id="user_info"></p>
</div>
<div>
<input type="password" name="password" id="pwd" placeholder="请设置密码">
<i id="pwd_icon"></i>
<p id="pwd_info" class="info"></p>
</div>
<p class="button">
<a href="javascript:void(0)" id="sigup-btn" class="btn show">注册</a>
<a href="javascript:void(0)" id="login-btn" class="btn">登 录</a>
</p>
</div>
</div>
<script>
var $ = {
ajax:function(options){
var xhr = null, // XMLHttpRequest对象
url = options.url, // url地址
method = options.method || 'get', // 传输方式，默认为get
async = typeof(options.async) === "undefined"?true:options.async,
data = options.data || null, // 参数
params = '',
callback = options.success, // ajax请求成功的回调函数
error = options.error;
// 将data的对象字面量的形式转换为字符串形式
if(data){
for(var i in data){
params += i + '=' + data[i] + '&';
}
params = params.replace(/&$/,"");
}
// 根据method的值改变url
if(method === "get"){
url += '?'+params;
}
if(typeof XMLHttpRequest != "undefined"){
xhr = new XMLHttpRequest();
}else if(typeof ActiveXObject != "undefined"){
// 将所有可能出现的ActiveXObject版本放在一个数组中
var xhrArr = ['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0'];
// 遍历创建XMLHttpRequest对象
var len = xhrArr.length;
for(var i = 0;i<len;i++){
try{
// 创建XMLHttpRequest对象
xhr = new ActiveXObject(xhrArr[i]);
break;
}
catch(ex){
}
}
}else{
throw new Error('No XHR object availabel.');
}
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if((xhr.status >=200 && xhr.status <300) || xhr.status === 304){
callback && callback(JSON.parse(xhr.responseText))
}else{
error && error();
}
}
}
// 创建发送请求
xhr.open(method,url,async);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(params);
},
jsonp:function(){
// 跨域
}
}
// $.ajax(
// {
// url:'http://127.0.0.1/register.php',
// method:'post',
// async:'false',
// data:{username:'13229594857',pwd:'32145667'},
// error:function(){
// }
// });
var user=document.getElementById('user'),
pwd=document.getElementById('pwd'),
sigup=document.getElementById('sigup-btn'),
userInfo=document.getElementById('user_info'),
userIcon=document.getElementById('user_icon'),
pwdInfo=document.getElementById('pwd_info'),
login=document.getElementById('login-btn'),
titles=document.getElementById('title').getElementsByTagName('span'),
pwdreg=/^\w{5,12}$/,
userreg=/^1[3578]\d{9}$/,
pwdIcon=document.getElementById('pwd_icon'),
isrepeat=false,
isfort=false;
function checkUser(){
var userval=user.value;
if(!userreg.test(userval)){
userInfo.innerHTML="手机号无效";
userIcon.className='none';
}
else{
userInfo.innerHTML=""
userIcon.className="ok"
$.ajax({
url:'http://localhost/rigster/server/isUserRepeat.php',
method:"get",
async:true,
data:{username:userval },
success:function(data){
if(data.code===1){
userIcon.className='ok'
isrepeat=false;
}
else if(data.code===0){
userIcon.className='none';
isrepeat=true;
userInfo.innerHTML=data.msg;
}else{
userInfo.innerHTML='检测失败,请重试...';
}
}
})
}
}
//检测密码
function checkpwd(){
var pwdval=pwd.value;
if(!pwdreg.test(pwdval)){
pwdInfo.innerHTML="请输入5到12位的字母、数字即下划线";
pwdIcon.className="none";
}
else{
pwdInfo.innerHTML=""
pwdIcon.className="ok"
}
}
function register(){
var user_val=user.value,
pwd_val=pwd.value;
if(userreg.test(user_val)&&pwdreg.test(pwd_val)&&!isrepeat){
$.ajax({
url:"http://localhost/rigster/server/register.php",
method:"post",
data:{username:user_val,userpwd:pwd_val},
success:function(data){
alert('注册成功请登录')
showlogin();
isfort=true;
user.value="";
pwd.value="";
},
error:function(){
pwdInfo.innerHTML="注册失败，请重试!"
isfort=false;
}
})
}
}
function loginbtn(){
var user_val=user.value,
pwd_val=pwd.value;
if(userreg.test(user_val)&&pwdreg.test(pwd_val)&&!isfort){
$.ajax({
url:"http://localhost/rigster/server/user.json",
method:"post",
data:{username:user_val,userpwd:pwd_val},
success:function(data){
alert('注册成功请登录')
window.location.href="http://www.imooc.com"
user.value="";
pwd.value="";
},
error:function(){
pwdInfo.innerHTML="注册失败，请重试!"
}
})
}
}
function showlogin(){
titles[0].className="current";
titles[1].className="";
login.className="show";
sigup.className="" ;
userIcon.className='';
pwdIcon.className="";
if(!isfort){
//是在这里判断手机号和密码是不是已经注册了吗，当切换到登录的时候怎么实现不用判断用户名有没有重复，而是判断有没有注册
}
}
function showsigup(){
titles[1].className="current";
titles[0].className="";
login.className="";
sigup.className="show" ;
}
user.addEventListener('blur',checkUser,false);
//绑定事件,检测密码的有效性
pwd.addEventListener('blur',checkpwd,false);
sigup.addEventListener('click',register,false);
titles[0].addEventListener('click',showlogin,false);
titles[1].addEventListener('click',showsigup,false);
login.addEventListener('click',loginbtn,false);
</script>
</body>
</html>
css
*{
margin:0;
padding:0;
}
body{
background:#333;
}
.register{
width:300px;
height:270px;
margin:80px auto;
padding:15px 30px;
background:#eee;
border-radius:5px;
}
.title{
height:35px;
}
.title span{
font-size:16px;
font-weight:bold;
color:#666;
margin-right:30px;
cursor:pointer;
}
.title span.current{
color:#f00;
}
.form div{
width:290px;
height:30px;
border-radius:8px;
background:#fff;
margin-bottom:25px;
padding:8px 10px;
position:relative;
}
.form div span{
display:inline-block;
padding-top:8px;
padding-right:3px;
color:#666;
}
.form div input{
border:none;
outline:none;
font-size:17px;
color:#666;
background:none;
}
.form div i{
position:absolute;
width:16px;
height:16px;
right:12px;
top:14px;
}
.form div i.ok{
background:url(../img/icon.png) no-repeat 0 -67px;
}
.form div i.no{
background:url(../img/icon.png) no-repeat -17px -67px;
}
.form .info{
margin-top:22px;
color:#f00;
padding-left:2px;
}
.button{
padding-top:7px;
}
.button a{
display:none;
width:100%;
height:45px;
line-height:45px;
text-align:center;
text-decoration:none;
background:#f20d0d;
color:#fff;
border-radius:30px;
font-size:16px;
}
.button a.show{
display:block;
}
1回答
-
好帮手慕久久
2022-01-07
同学你好，解答如下：
1、判断登录的内容是否和“注册的内容”一致的具体逻辑，并不是我们做的。我们只需要把登录信息发给后端，后端会进行判断，然后把最终的判断结果返回给我们，比如“登录成功、用户未注册、登录信息不存在......”；我们拿到返回信息后，再做下一步操作。
2、登录的逻辑不需要在如下位置写：
showlogin这个方法，只是把登录界面显示出来。真正的登录逻辑，需要在点击登录按钮的时候触发，即需要在loginbtn方法中书写：
在loginbtn方法中，只需要把登录信息传给后端就行，后端会返回我们验证后的信息：
即具体的判断结果，不是我们决定的，而是后端查询数据库、做了一系列判断后返回给我们的。
我们的后端只是模拟的，功能并不完善，所以同学了解一下怎么操作就行。
祝学习愉快！
0
相似问题