网站手机验证码实战

于 2021-09-13 14:57:33 发布
阅读量292 收藏
点赞数
分类专栏： # 网络 文章标签： 网络
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42647547/article/details/120261933
版权
该博客详细介绍了如何构建一个前端网页的用户认证系统，包括登录和注册功能。主要涉及两个模块：index.js负责事件调用和cookie认证，user.js包含登录和注册的具体逻辑。当用户打开网页时，系统会检查cookie进行身份验证。登录和注册过程通过事件监听触发，同时实现了验证码刷新和短信验证码发送功能。当用户成功登录或注册后，页面会相应地更新用户状态。
摘要由CSDN通过智能技术生成

一、编写思路

整体分为两个模块文件

1.主模块index.js 负责所有的事件调用，以及用户登入网页时的cookie认证
2.子模块user.js中有分为两个模块一个为登录模块一个为注册模块

将子模块通过入参的方式注入即可实现调用

二、补充知识

占坑…

三、源码

index.js
var main = (function(doc, loginAction, regAction){
 
  var oOpenLoginBtn = doc.getElementsByClassName('js_openLoginBtn')[0],
      oOpenRegBtn = doc.getElementsByClassName('js_openRegBtn')[0],
      oCloseLoginBtn = doc.getElementsByClassName('js_closeBtn')[0],
      oCloseRegBtn = doc.getElementsByClassName('js_closeBtn')[1],
      oLoginBtn = doc.getElementsByClassName('js_loginBtn')[0],
      oRegBtn = doc.getElementsByClassName('js_regBtn')[0],
      oSendCodeBtn = doc.getElementsByClassName('js_sendCodeBtn')[0],
      oLoginStatus = doc.getElementsByClassName('js_loginStatus')[0],
      oCodeImg = doc.getElementsByClassName('js_codeImg')[0],
 
      loginTpl = doc.getElementById('js_loginTpl').innerHTML,
      userTpl = doc.getElementById('js_userTpl').innerHTML;
 
  function bindEvent(){
  	oOpenLoginBtn.addEventListener('click', loginAction.openLoginBoard.bind(null, true), false);
    oOpenRegBtn.addEventListener('click', regAction.openRegBoard.bind(null, true), false);
  	oCloseLoginBtn.addEventListener('click', loginAction.openLoginBoard.bind(null, false), false);
    oCloseRegBtn.addEventListener('click', regAction.openRegBoard.bind(null, false), false);
    oLoginBtn.addEventListener('click', loginAction.login.bind(loginAction), false);
    oRegBtn.addEventListener('click', regAction.register.bind(regAction), false);
    oSendCodeBtn.addEventListener('click', regAction.sendTelCode.bind(regAction, oSendCodeBtn), false);
    oCodeImg.addEventListener('click', regAction.refreshCode.bind(null, oCodeImg), false);
  }
  
  //方法私有化
  function renderUserArea(isLogin){
    if(isLogin){
      manageCookies.get('nickname', function(cookie){
        oLoginStatus.innerHTML = userTpl.replace(/{{(.*?)}}/g, cookie);
      });
    }else{
      oLoginStatus.innerHTML = loginTpl;
    }
  }
  
  //方法公用化
  return {
    init: function(){
      this.checkAuth();
      bindEvent();
    },
 
    checkAuth: function(){
      var _self = this;
 
      manageCookies.get('auth', function(cookie){
        if(cookie != undefined){
          xhr.ajax({
            url: 'http://localhost/api_for_study/User/checkAuth',
            type: 'POST',
            dataType: 'JSON',
            data: {
              auth: cookie
            },
            success: function(data){
              var code = data.error_code,
                  errorInfo = '';
 
              switch(code){
                case '1006':
                  errorInfo = '登录验证不通过，请重试';
                  loginAction.openLoginBoard(true);
                  renderUserArea(false);
                  break;
                case '1007':
                  errorInfo = '登录已过期，请重试';
                  loginAction.openLoginBoard(true);
                  renderUserArea(false);
                  break;
                case '200':
                  renderUserArea(true);
                  break;
                default:
                  break;
              }
            }
          });
        }
      });
    }
  }
})(document, loginAction, regAction);
 
user.js
var loginAction = (function(doc){
	var oModal = doc.getElementsByClassName('js_modal')[0],
      submitURL = doc.getElementById('js_loginForm').action,
	    oUsername = doc.getElementById('js_username'),
	    oPassword = doc.getElementById('js_password'),
	    oErrorTip = doc.getElementsByClassName('js_errorTip')[0],
	    oPersistedLogin = doc.getElementById('js_persistedLogin');
 
	function _submitForm(data){
    xhr.ajax({
      url: submitURL,
      type: 'POST',
      dataType: 'JSON',
      data: data,
      success: function(data){
        var code = data.error_code,
            errorInfo = '';
 
        switch(code){
        	case '1001':
        	  errorInfo = '用户名长度不正确';
        	  break;
        	case '1002':
        	  errorInfo = '密码长度不正确';
        	  break;
        	case '1003':
        	  errorInfo = '此用户名不存在';
        	  break;
        	case '1004':
        	  errorInfo = '密码不正确';
        	  break;
        	case '1005':
        	  errorInfo = '登录失败，请重试';
        	  break;
        	case '200':
        	  location.reload();
        	  break;
        	default:
        	  break;
        }
 
        oErrorTip.innerHTML = errorInfo;
      }
    });
  }
  
  return {
    openLoginBoard: function(show){
      if(show){
      	oModal.className += ' show login';
      }else{
      	oModal.className = 'modal-container js-modal';
      }
    },
 
    login: function(e){
    	var e = e || window.event;
    	e.preventDefault();
 
    	var username = trimSpace(oUsername.value),
    	    password = trimSpace(oPassword.value);
 
      if(username.length < 6 || username.length > 20){
  			oErrorTip.innerText = '用户名长度：6-20位';
  			return;
  		}
 
  		if(password.length < 6 || password.length > 20){
  			oErrorTip.innerText = '密码长度：6-20位';
  			return;
  		}
      oErrorTip.innerHTML = '';
  		_submitForm({
  			username: username, 
  			password: password, 
  			isPersistedLogin: oPersistedLogin.checked
  		});
    }
  }
})(document);
 
var regAction = (function(doc){
	var oModal = doc.getElementsByClassName('js_modal')[0],
      submitURL = doc.getElementById('js_regForm').action,
	    sendTelCodeURL = doc.getElementsByClassName('js_sendCodeBtn')[0].value,
      oNumber = doc.getElementById('js_rnumber'),
	    oPassword = doc.getElementById('js_rpassword'),
	    oTelCode = doc.getElementById('js_rtelcode'),
	    oPassCode = doc.getElementById('js_rpasscode'),
	    oErrorTip = doc.getElementsByClassName('js_errorTip')[1],
      oCodeImg = doc.getElementsByClassName('js_codeImg')[0],
 
      telCodeBtnDisabled = false;
 
	var t = null,
	    s = 60,
	    os = 60;
 
	function _submitForm(data, obj){
    xhr.ajax({
      url: submitURL,
      type: 'POST',
      dataType: 'JSON',
      data: data,
      success: function(data){
        var code = data.error_code,
            errorInfo = '';
 
        switch(code){
          case '1008':
            errorInfo = '手机号格式不正确';
            break;
          case '1002':
            errorInfo = '密码长度：6-20位';
            break;
          case '1009':
            errorInfo = '图片验证码不正确';
            break;
          case '1010':
            errorInfo = '与接收验证码的手机号不一致';
            break;
          case '1011':
            errorInfo = '短信验证码不正确';
            break;
          case '1014':
            errorInfo = '注册失败，请重试';
          default: 
            break;
        }
        oErrorTip.innerText = errorInfo;
        obj.refreshCode(oCodeImg);
        
        if(code == '200'){
          oErrorTip.innerText = '注册成功';
          setTimeout(function(){
            location.reload();
          }, 300);
        }
      }
    });
  }
 
  function countDown(obj){
  	if(s <= 0){
    	clearInterval(t);
    	t = null;
    	s = os;
      obj.className = 'input-btn js_sendCodeBtn';
      obj.disabled = false;
      obj.innerText = '获取验证码';
      telCodeBtnDisabled = false;
    }else{
    	s--;
    	obj.className += ' disabled';
      obj.disabled = true;
      obj.innerText = '已发送' + s + '秒';
      telCodeBtnDisabled = true;
    }
  }
  
  return {
  	openRegBoard: function(show){
      if(show){
      	oModal.className += ' show reg';
      }else{
      	oModal.className = 'modal-container js-modal';
      }
    },
 
    refreshCode: function(obj){
    	var imgUrl = obj.src;
 
    	obj.src = imgUrl.indexOf('?') > 0 ? 
    	           imgUrl.replace(/\?.*$/, '') + '?rand=' + Math.random() :
    	           imgUrl + '?rand=' + Math.random();
    },
 
    sendTelCode: function(btn){
    	var e = e || window.event;
    	e.preventDefault();
 
    	var pNumber = trimSpace(oNumber.value),
    	    errorInfo = '';
 
    	if(pNumber.length !== 11){
  			oErrorTip.innerText = '手机号长度：11位';
  			return;
  		}
 
  		if(!phoneNumberCheck(pNumber)){
  			oErrorTip.innerText = '手机号格式不正确';
  			return;
  		}
 
      if(!telCodeBtnDisabled){
        btn.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
      
        xhr.ajax({
          url: sendTelCodeURL,
          type: 'POST',
          dataType: 'JSON',
          data: {
            pNumber: pNumber
          },
          success: function(data){
            var code = data.error_code,
                errorInfo = '';
 
            switch(code){
              case '1008':
                errorInfo = '手机号格式不正确';
                break;
              case '1012':
                errorInfo = '手机号已被使用';
                btn.innerText = '获取验证码';
                break;
              case '1013':
                errorInfo = '验证码发送失败';
                btn.innerText = '获取验证码';
                break;
              case '200':
                t = setInterval(countDown.bind(null, btn), 1000);
                errorInfo = '验证码发送成功';
                break;
              default: 
                errorInfo = '验证码发送失败';
                btn.innerText = '获取验证码';
                break;
            }
 
            oErrorTip.innerText = errorInfo;
          }
        });
      }
    },
 
    register: function(){
      var e = e || window.event;
    	e.preventDefault();
 
    	var pNumber = trimSpace(oNumber.value),
    	    password = trimSpace(oPassword.value),
    	    telcode = trimSpace(oTelCode.value),
    	    passcode = trimSpace(oPassCode.value);
 
      if(pNumber.length !== 11){
  			oErrorTip.innerText = '手机号长度：11位';
  			return;
  		}
 
  		if(!phoneNumberCheck(pNumber)){
  			oErrorTip.innerText = '手机号格式不正确';
  			return;
  		}
 
  		if(password.length < 6 || password.length > 20){
  			oErrorTip.innerText = '密码长度：6-20位';
  			return;
  		}
 
  		if(telcode.length !== 6){
  			oErrorTip.innerText = '手机验证码长度：6位';
  			return;
  		}
 
  		if(digitCheck(telcode)){
        oErrorTip.innerText = '手机验证码必须是数字';
  			return;
  		}
 
  		if(passcode.length !== 4){
  			oErrorTip.innerText = '图片验证码长度：4位';
  			return;
  		}
 
  		if(alphabetCheck(passcode)){
  			oErrorTip.innerText = '图片验证码必须是字母';
  			return;
  		}
 
  		oErrorTip.innerHTML = '';
  		_submitForm({
        pNumber: pNumber,
        password: password,
        telcode: telcode,
        passcode: passcode
  		}, this);
    }
  }
 
})(document);

四、总结

占坑…

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值