老师，这个登录怎么样才能实现啊
来源：2-11 脚本
qq_慕粉6009927
2020-10-16 23:52:00
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="register">
<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 class="info" id="pwd_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="login-btn">登 录</a>
</p>
</div>
</div>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
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"),
pwdicon=document.getElementById("pwd_icon"),
sigupbtn=document.getElementById("sigup-btn"),
userReg = /^1[3578]\d{9}$/,
pwdReg = /^\w{5,12}$/,
isRepeat=false, // 记录用户名是否被占用
sloginbtn=document.getElementById("slogin-btn"),
login=document.getElementById("login-btn"),
title=document.getElementById("title").getElementsByTagName("span");
// 检查用户
function checkUser(){
var userVal=user.value;
// 验证手机号是否有效
if (!userReg.test(userVal)) {
userinfo.innerHTML="手机号码无效";
usericon.className='no';
}else{
userinfo.innerHTML="";
usericon.className='';
// 发起请求
$.ajax({
url:"http://localhost/jSonandAjax/register/server/isUserRepeat.php",
method:"post",
asaync:true,
data:{username:userVal},
success:function(data){
if (data.code == 1) {
usericon.className="ok";
isRepeat=false;
}
else if(data.code == 0){
usericon.className="no";
userinfo.innerHTML=data.msg;
isRepeat=true;
}else{
userinfo.innerHTML="检测失败，请重试"
}
}
})
}
}
// 检测密码
function checkPwd(){
var pwdVal = pwd.value;
if (!pwdReg.test(pwdVal)) {
pwdinfo.innerHTML="请输入5到12位的字母、数字及下划线";
pwdicon.className="no";
}else{
pwdinfo.innerHTML="";
pwdicon.className="ok";
}
}
// 注册
function register(){
var userVal = user.value,
pwdVal = pwd.value;
//如果手机号有效且没有被占用
if (userReg.test(userVal) && pwdReg.test(pwdVal)&& !isRepeat) {
// 发起请求，实现注册
$.ajax({
url:"http://localhost/jSonandAjax/register/server/register.php",
asaync:true,
method:"post",
data:{username:userVal,userpwd:pwdVal},
success:function(data){
alert("注册成功，请登录");
// 调用显示登录界面
showLogin();
// 清空文本框
user.value="";
pwd.value="";
},
error:function(){
pwdinfo.innerHTML="注册失败，请重试！";
}
})
}
}
// 登录
function userLogin(){
var userVal=user.value,
pwdVal=pwd.value;
$.ajax({
url:"http://localhost/jSonandAjax/register/server/user.json",
method:"post",
asaync:true,
data:{username:userVal,userpwd:pwdVal},
success:function(data){
for(var i in data){
if (data[i].username==userVal&&data[i].userpwd==pwdVal) {
alert("登录成功！");
}
else{
alert("登录失败！");
return;
}
}
}
})
}
// 显示登录
function showLogin(){
title[0].className="current";
title[1].className="";
login.className="show";
sigupbtn.className="";
}
// 注册显示
function showSigupbtn(){
title[1].className="current";
title[0].className="";
sigupbtn.className="show";
login.className="";
}
// 绑定事件，检测用户的有效性及是否注册过
user.addEventListener("blur",checkUser,false);
// 绑定事件，检测用户密码的有效性
pwd.addEventListener("blur",checkPwd,false);
// 注册
sigupbtn.addEventListener("click",register,false);
// 登录的高亮
title[0].addEventListener("click",showLogin,false);
// 注册的高亮
title[1].addEventListener("click",showSigupbtn,false)
// 登录
login.addEventListener("click",userLogin,false);
</script>
</body>
</html>
*{
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;
display:inline-block;
padding-top:5px;
}
.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:6px;
padding-right:3px;
color:#666;
}
.form div input{
border:none;
outline:none;/*外边框*/
font-size:16px;
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:14px;
color:red;
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;
}
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(){
// 跨域
}
}
1回答
-
同学你好，因为for循环中，在判断登录失败时，直接就return退出了，导致如果第一次不满足条件，结束遍历了，并不会遍历完剩下的数据，所以无法实现效果。
建议：在for循环外声明一个变量，保存结果，当遇到符合条件的时候，使用break关键字结束循环，否则的话就继续往后遍历，直到遍历完所有的数据，在for循环结束后，弹出提示信息。
但是由于登录和注册使用的都是同一个输入框，会导致在登录界面时，输入手机号也会发起手机号验证的ajax请求，由于已经注册过了，出现手机号重复的提示，但这个时候是登陆，不需要验证手机号是否重复了
建议：在checkUser方法中添加判断，如果login的类名等于show，表示当前处于登录界面，直接return，不再执行后面的ajax请求了。
测试结果如下：
已经注册的用户登录成功
未注册的用户登录失败
祝学习愉快~
0
相似问题