移動端用戶登錄&註冊案例

用的是TypeScript語言，主要是展示相關的思想邏輯，而不是語法。會說明註冊和登錄頁面進行局部切換的邏輯、用賬號密碼登錄的相關邏輯、用手機號和驗證碼登錄的相關邏輯、獲取驗證碼的相關邏輯，忘記密碼的相關邏輯，最後點擊登錄的相關邏輯

一、註冊和登錄頁面進行局部切換

效果圖：

即點擊驗證碼登錄時會切換到驗證碼登錄，可以看到登錄密碼輸入框的信息變成驗證碼輸入框的信息，思想：

1. 將賬號輸入框寫在一個li標籤裏面；
2. 將密碼輸入框、驗證碼登錄文字、註冊賬號登錄文字、登錄按鈕寫在一個li標籤裏面；
3. 將驗證碼輸入框、驗證碼登錄文字、註冊賬號登錄文字、登錄按鈕寫在一個li標籤裏面；

第2和3步驟的樣式完全一樣，再給3加一個display:none屬性給隱藏掉，再給2和3的裏面的驗證碼登錄文字加上點擊函數，即點擊驗證碼登陸時上面第二步驟內容隱藏掉；點擊賬號密碼登陸時上面第三步驟內容隱藏掉。點擊函數內容如下

//全局定義一個 loginType變量，用來標識登錄方式；1代表密碼登錄，2代表驗證碼登錄
  public loginType:number = 1;
 //賬號密碼或者驗證碼登錄
    public loginSelect(loginSelectFlag){//loginSelectFlag傳入1或者是2
        this.loginType=loginSelectFlag;
        if(loginSelectFlag == 2) {
            (<HTMLElement>this.$('.get-code-login')).style.display="none";
            (<HTMLElement>this.$('.password-login')).style.display="block";
        }else{
            (<HTMLElement>this.$('.password-login')).style.display="none";
            (<HTMLElement>this.$('.get-code-login')).style.display="block";
        }
    }

二、點擊獲取驗證碼的相關邏輯

點擊之後要判斷輸入的手機號是否符合號碼規則，符合之後驗證碼開始進行60s倒計時，輸入驗證碼之後判斷是否輸入正確

//首先定義相關變量：
   //登錄service
    public loginService:LoginService;
    //獲取短信驗證碼倒計時
    private countdown:number = 60;
    //定時任務
    private timeId:number;
    //是否需要短信驗證碼
    public isNeedSmsc = ISSMSC;
    //是否可調用獲取驗證碼接口
     private isCanGetSms:boolean = true;
 /**
     * 獲取手機驗證碼
     */
    public getSmsCode(){
        if(this.isMobileValidate()){
            //手機號碼合法,調用相關接口
            this.getSmsCodeInterface();
        }
    }
    /**
     * 校驗手機號
     */
    public isMobileValidate(){
        let mobile = (<HTMLInputElement>this.$("input[name='userName']")).value.trim();
        if(mobile == ''){//檢查手機號是否輸入
            this.alert('請輸入手機號碼');
            return false;
        }else {
            let reg = /^0?(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[189])[0-9]{8}$/;
            let isMobileValid = reg.test(mobile);
            if(!isMobileValid){
                this.alert('手機號碼不合法,請重新輸入');
                return false;
            }
        }
        return true;
    }
    /**
     * 手機號碼合法,調用相關接口
     */
    public getSmsCodeInterface(){
        let self = this;
        this.isCanGetSms = false;
        self.reRender('.get-smsc');//reRender()方法是重新進行頁面渲染函數
        let countFun = function (){
            self.countdown--;
            if(self.countdown==0){
                self.countdown=60;
                self.isCanGetSms = true;
                window.clearInterval(self.timeId);
            }
            self.reRender('.get-smsc');
        };
        self.timeId = window.setInterval(countFun,1000,60);
        let getCodeByPhoneRequest = new GetCodeByPhoneRequest();
        getCodeByPhoneRequest.phoneNum = (<HTMLInputElement>this.holder.querySelector("input[name='userName']")).value;
        getCodeByPhoneRequest.bizType = '2';//bizType 代表的是註冊還是登錄，定義的是2代表登錄
  //getCodeByPhone()是調用接口的方法函數
        this.loginService.getCodeByPhone(getCodeByPhoneRequest).then((getSmsResponse:GetCodeByPhoneResponse)=>{
            if(getSmsResponse.code == '200'){
                this.notify('success',getSmsResponse.msg);
            }else {
                this.alert(getSmsResponse.msg);
                window.clearInterval(this.timeId);
                this.timeId = null;
                this.countdown = 60;
                this.isCanGetSms = true;
                this.reRender('.get-smsc');
            }
        }).catch((error)=>{
            this.alert(error);
        })
    }

定義獲取驗證碼的接口函數getCodeByPhone()

 public getCodeByPhone(getCodeByPhoneRequest:GetCodeByPhoneRequest):Promise<GetCodeByPhoneResponse>{
      return new Promise((resolve,reject)=>{         
//用的fetch方法調用接口，獲取後臺數據
      this.initFetch(PATHROOT.GPFAPI+'/register/getCode',getCodeByPhoneRequest).then((getSmsResponse:GetSmsResponse)=>{
                if(getSmsResponse.code == "200"){
                    resolve(getSmsResponse);
                } else {
                    reject(getSmsResponse.msg);
                }

            }).catch((error) => {
                reject(error);
            });
        });
    }

三、點擊登錄會進行的相關邏輯

 //點擊登錄
    public toLogin(loginFlag){
        this.loginType=loginFlag;
        let userName = (<HTMLInputElement>this.holder.querySelector("input[name='userName']")).value.trim();
        let password = (<HTMLInputElement>this.holder.querySelector("input[name='password']")).value.trim();
        let pwMd5 = this.getPassword();
        if(userName =="" || password==""){
            if(this.loginType == 2) {
                this.alert("請輸入用戶名或驗證碼");
            }else {
                this.alert("請輸入用戶名或密碼");
            }
            if(userName==""){
                (<HTMLInputElement>this.holder.querySelector("input[name='userName']")).dispatchEvent(new CustomEvent("focus"))
            }
        }else {
            this.showPreloader("登錄中...");
            let loginRequest = new LoginRequest();
            loginRequest.un = userName;
            if(this.loginType == 1){
                loginRequest.pw = pwMd5;
            }else {
                loginRequest.pw = password;
                loginRequest.smsc = password;
            }
            //mc 爲機器碼，切換賬戶和寫在應用(即本地數據庫清空)則用新生成的uuid
            if(userName == this.oldAccount && this.oldDeviceCode !=''){
                loginRequest.mc = this.oldDeviceCode;
            }else {
                loginRequest.mc = uuidv4();
            }
            // loginRequest.isSavePass  = (<HTMLInputElement>this.holder.querySelector("input[name='swt_pass_save']")).checked == true ? "1" : "0";
            loginRequest.isSavePass = '0';
            //getQueryString是對密碼進行加密的方法
            loginRequest.pt = getQueryString('pt')?getQueryString('pt'):'';
            //調用登錄方法
            this.loginFun(loginRequest);
        }
    }
    /**
     * 調用登錄方法
     * @param {LoginRequest} loginRequest
     */
    public loginFun(loginRequest:LoginRequest){
        let password = (<HTMLInputElement>this.holder.querySelector("input[name='password']")).value;
        this.isPwdLegal = true;
        //校驗密碼是否符合規則
        let pwdRule = PASSWORD_RULE[PASSWORDRULE];
        if(pwdRule.regExpression){
            let re = new RegExp(pwdRule.regExpression);
            if(!re.test(password)){
                this.isPwdLegal = false;
            }else {
                this.isPwdLegal = true;
            }
        }
        if(this.loginType == 1){
            this.loginService.login(loginRequest).then((resp:LoginAllResponse)=>{
                this.loginSuccess(resp);
            }).catch((error)=>{
                this.hidePreloader();
                this.alert(error);
            });
        } else {
            this.loginService.loginBySMSC(loginRequest).then((resp:LoginAllResponse)=>{
                this.loginSuccess(resp);
            }).catch((error)=>{
                this.hidePreloader();
                this.alert(error);
            });
        }
    }
    /**
     * 登錄成功後進行的操作
     * @param {LoginAllResponse} resp
     */
    public loginSuccess(resp:LoginAllResponse){
        if(resp.code == '200'){
            this.hidePreloader();
            if(this.isBindUser && isWeixin()){
                this.showPreloader('正在關聯微信,請稍後...');
                this.loginService.findOpenId().then((openId:string)=>{
                    this.openId = openId;
                    return this.userInfoService.getCurrUserInfo();
                }).then((userInfo)=>{
                    let bindUserRequest = new BindOrUnbindUserRequest();
                    bindUserRequest.userId = userInfo.loginAccount;
                    bindUserRequest.openId = this.openId;
                    bindUserRequest.serviceCode = 'yanyuke';
                    return this.loginService.bindUser(bindUserRequest);
                }).then((bindResp)=>{
                    if(bindResp.code == 200){
                        this.notify('success','該賬號已與微信關聯');
                    }
                    this.hidePreloader();
                    this.retailerLoginCallback(resp.data,this.isPwdLegal);
                }).catch((error)=>{
                    this.retailerLoginCallback(resp.data,this.isPwdLegal);
                    this.hidePreloader();
                    this.alert(error);
                })
            }else {
                this.retailerLoginCallback(resp.data,this.isPwdLegal);
            }

        }else if(resp.code == '401'){
            //用戶名密碼錯誤
            this.hidePreloader();
            this.alert(resp.msg);
        }else if(resp.code == '402'){
            //機器碼不匹配
            this.hidePreloader();
        }else if(resp.code == '403'){
            //短信碼不正確
            this.hidePreloader();
            this.alert(resp.msg);
        }
    }

對用戶輸入的密碼進行加密的方法

//加密密碼
    public getPassword():string{
        //密碼擴展
        let PWD_EXTEND = "4aSys";
        let pwMd5 = '';
        if((<HTMLInputElement>this.holder.querySelector("input[name='password']")).value!=""){
            let pw = (<HTMLInputElement>this.holder.querySelector("input[name='password']")).value;
            pwMd5 = String(CryptoJS.MD5(String(CryptoJS.MD5(pw))+PWD_EXTEND));
            console.log('pwMd5',pwMd5);
        }
        return pwMd5;
    }

點擊忘記密碼進行的相關操作

  }
    //忘記密碼
    public resetPwd() {
        let verifyPhoneComp = new VerifyPhoneComponent((resetPwdRequest:ResetPwdRequest) => {
            let changePwdComp = new ChangePwdComponent(resetPwdRequest,(resetPwdRequest:ResetPwdRequest) => {
                this.onBack();
            });
            this.view.loadController(changePwdComp);
        });
        this.view.loadController(verifyPhoneComp);
    }

四、點擊註冊進行的相關邏輯

 public register(){
        if(this.isNeedSmsc){
            this.registerBySmsc();
        }else {
            this.registerNotSmsc();
        }
    }
    

/**
     * 註冊-需要短信驗證碼
     */
    public registerBySmsc() {
        //校驗手機號碼
        if (!this.isMobileValidate()) {
            return;
        }
        //校驗驗證碼
        let smsc = (<HTMLInputElement>this.$("input[name='smsc']")).value.trim();
        if (smsc == '') {
            this.alert('請輸入驗證碼');
            return;
        }
        //校驗密碼
        let pwd = (<HTMLInputElement>this.$("input[name='pwd']")).value.trim();
        let confPwd = (<HTMLInputElement>this.$("input[name='confPwd']")).value.trim();
        if(pwd==''){
            this.alert('請輸入密碼');
            return;
        }
        if(confPwd==''){
            this.alert('請輸入確認密碼');
            return;
        }
        if(pwd != confPwd){
            this.alert('兩次密碼輸入的不一致，請重新輸入');
            return;
        }
        //校驗密碼是否符合規則
        let pwdRule = PASSWORD_RULE[PASSWORDRULE];
        if(pwdRule.regExpression){
            let re = new RegExp(pwdRule.regExpression);
            if(!re.test(pwd)){
                this.alert(pwdRule.msg);
                return;
            }
        }
        //調用接口
        this.registerInterface();
    }
    public registerInterface(){
        let self = this;
        let mobile = (<HTMLInputElement>this.$("input[name='mobile-num']")).value.trim();
        let smsCode = '';
        if(this.isNeedSmsc){
            smsCode = (<HTMLInputElement>this.$("input[name='smsc']")).value.trim();
        }else {
            smsCode = '6666';
        }
        let registerRequest = new RegisterRequest();
        //組織ID;大衆用戶，傳037f17e0ab5911e8b27f9ff6cddfd4ea
        registerRequest.gggId = '037f17e0ab5911e8b27f9ff6cddfd4ea';
        //密碼（MD5）
        registerRequest.gguaPwd = this.getPassword();
        //0.PC端；1.移動端；2.微信；3.通用
        registerRequest.gguaType = '2';
        //0.正常；1.鎖定
        registerRequest.gguaStatus = '0';
        //0.CA；1.密碼；2.綜合
        registerRequest.gguaLoginType = '2';
        //機器碼
        registerRequest.gguaMc = uuidv4();
        //用戶賬號；手機註冊爲註冊手機號
        registerRequest.gguaAccount = mobile;
        //短信碼
        registerRequest.smsCode = smsCode;
        //初始角色編碼(大衆用戶：LIC_PERSONS)，不傳或者系統中沒有的角色，用戶將沒有角色
        registerRequest.ggroCode = 'LIC_PERSONS';
        //  this.loginService.register(registerRequest)調用註冊接口方法
        this.loginService.register(registerRequest).then((registerResponse:RegisterResponse)=>{
            // this.notify('success',registerResponse.msg);
            this.alert('賬號註冊成功',()=>{
                self.onBack();
            });

        }).catch((error)=>{
            this.alert(error);
        })
    }
    //加密密碼
    public getPassword():string{
        let pwd = (<HTMLInputElement>this.$("input[name='pwd']")).value.trim();
        //密碼擴展
        let PWD_EXTEND = "4aSys";
        let pwMd5 = '';
        if(pwd!=""){
            // pwMd5 = String(CryptoJS.MD5(String(CryptoJS.MD5(pwd))+PWD_EXTEND));
            pwMd5 = String(CryptoJS.MD5(pwd));
            console.log('pwMd5',pwMd5);
        }
        return pwMd5;
    }

    /**
     * 註冊-不需要短信驗證碼
     */
    public registerNotSmsc(){
        //校驗手機號碼
        if (!this.isMobileValidate()) {
            return;
        }
        //校驗密碼
        let pwd = (<HTMLInputElement>this.$("input[name='pwd']")).value.trim();
        let confPwd = (<HTMLInputElement>this.$("input[name='confPwd']")).value.trim();
        if(pwd==''){
            this.alert('請輸入密碼');
            return;
        }
        if(confPwd==''){
            this.alert('請輸入確認密碼');
            return;
        }
        if(pwd != confPwd){
            this.alert('兩次密碼輸入的不一致，請重新輸入');
            return;
        }
        //校驗密碼是否符合規則
        let pwdRule = PASSWORD_RULE[PASSWORDRULE];
        if(pwdRule.regExpression){
            let re = new RegExp(pwdRule.regExpression);
            if(!re.test(pwd)){
                this.alert(pwdRule.msg);
                return;
            }
        }
        let getCodeByPhoneRequest = new GetCodeByPhoneRequest();
        getCodeByPhoneRequest.phoneNum = (<HTMLInputElement>this.holder.querySelector("input[name='mobile-num']")).value;
        getCodeByPhoneRequest.bizType = '1';
        this.loginService.getCodeByPhone(getCodeByPhoneRequest).then((getSmsResponse:GetCodeByPhoneResponse)=>{
            if(getSmsResponse.code == '200'){
                this.registerInterface();
            }else {
                this.alert(getSmsResponse.msg);
            }

        }).catch((error)=>{
            this.alert(error);
        })

    }

調用註冊接口的相關辦法

 public register(registerRequest:RegisterRequest):Promise<RegisterResponse>{
        return new Promise((resolve,reject)=>{
            下面的'/register'是要調用的註冊接口
            this.initFetch(PATHROOT.GPFAPI+'/register',registerRequest).then((getSmsResponse:RegisterResponse)=>{
                if(getSmsResponse.code == "200"){
                    resolve(getSmsResponse);
                } else {
                    reject(getSmsResponse.msg);
                }
            }).catch((error) => {
                reject(error);
            });
        });
    }

獲取url後面查詢參數的方法

export function getQueryString (name){
    let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    let r = window.location.search.substr(1).match(reg);//search,查詢？後面的參數，並匹配正則
    if(r!=null){
        let val = (<any>window).unescape(r[2]);
        if(!val || val=='null' || val=='undefined'){
            return  '';
        }else {
            return  val;
        }
    }else {
        return null;
    }