mobile開發規範--註冊模組react

     登入註冊，react寫的。註冊主要是擷取驗證碼，驗證碼驗證，註冊密碼。

模組代碼：

驗證碼：

        return (            <div className="um-win">                <ValidateUser                    type={'register'}                    id={'RegisterPwd'}                    url={'comps/summer-component-login/www/html/RegisterPwd.html'}                    serverUrl={'/auth/checkValidatorCode'}                    />            </div>        )    }

ValidateUser

        ajax({            type: 'post',            url: '/auth/sendValidatorCode',            param: param        }, function (res) {            console.log(res);            if(res.flag == 0){                if(self.props.type == 'forget'){                    self.setState({                        userId:res.data.userId                    })                }                summer.toast({msg:'發送驗證碼成功'});            }else {                summer.toast({msg:res.msg});                targetDom.className='get-pwd btn';                targetDom.disabled=false;                targetDom.innerHTML="擷取驗證碼";                clearInterval(IntervalTimer);                self.getImgSrc();                self.setState({                    imgContent:''                })            }        }, function (err) {            let message=err.error ? err.error : '請求出錯';            summer.toast({msg:message});            targetDom.className='get-pwd btn';            targetDom.disabled=false;            targetDom.innerHTML="擷取驗證碼";            clearInterval(IntervalTimer);            self.getImgSrc();            self.setState({                imgContent:''            })        })    }    /*校正點擊擷取驗證碼*/    beforeGetCode(){        let rePhone=/^1\d{10}$/;        if(this.state.imgContent == ''){            summer.toast({msg:'請輸入圖文驗證碼'});            return false;        }        if(this.state.phone == ''){            summer.toast({msg:'請輸入手機號'});            return false;        }        if(!rePhone.test(this.state.phone) ){            summer.toast({msg:'手機號格式不正確'});            return false;        }        return true;    }    handleBtnClick=(e)=>{        e.preventDefault();        e.stopPropagation();        if(this.props.type=='bindAccount'){            this.bindAccount();        }else {            this.validateCode();        }    }

此處省略其他後台調用代碼（差不多)..........
HTML

    render() {        let btnText=this.props.btnText ? this.props.btnText : '下一步';        return (                <div className="um-content">                    <div className="um-input-text">                        <input type="text" className="form-control" placeholder="請輸入手機號" value={this.state.phone} onChange={(e)=>this.handlerChange('phone',e)} />                    </div>                    <div className="um-input-text pr">                        <input type="text" className="form-control" placeholder="圖形驗證碼" value={this.state.imgContent} onChange={(e)=>this.handlerChange('imgContent',e)}/>                        <div  className="img-container" onClick={(e)=>this.getImgSrc(e)}>                            <img src={this.state.imgSrc} alt="" className="randomImg"/>                        </div>                    </div>                    <span className="friendly-tips">看不清。點擊切換圖片</span>                    <div className="get-pwd-box">                        <input type="text" placeholder="6位簡訊驗證碼" className="form-control msg-input" onChange={(e)=>this.handlerChange('phoneMsg',e)}/>                        <button className="get-pwd btn" onClick={(e)=>this.getVerifyCode(e)}>擷取驗證碼</button>                    </div>                    <button className="um-btn go-next-step" onClick={(e)=>this.handleBtnClick(e)}>{btnText}</button>                </div>        )    }

註冊：

    render() {        return (            <div className="um-win">                <ValidatePwd                    buttonText={"註冊"}                    type={'register'}                    contact={this.state.contact}                    serverUrl={'/auth/register'}                    />            </div>        )    }

ValidatePwd模組：

        ajax({            type: 'post',            url: this.props.serverUrl,            param: param        }, function (res) {            console.log(res);            if (res.flag == 0) {                if (self.props.type == 'register') {                    /*註冊完成後會返回token值，便於下一步完善使用者資訊*/                    var userinfo = {                        token: res.data                    };                    summer.setStorage('userinfo', userinfo);                    summer.toast({ msg: '註冊成功' });                    summer.closeWin();                } else if (self.props.type == 'forget') {                    summer.toast({ msg: '密碼修改成功' });                    summer.closeWin();                }            } else if (res.flag == 1) {                summer.toast({ msg: res.msg });                summer.closeWin();            } else {                var message = res.msg ? res.msg : '請求出錯';                summer.toast({ msg: message });                summer.closeWin();            }        }, function (err) {            var message = err.error ? err.error : '請求出錯';            summer.toast({ msg: message });            summer.closeWin();        });

HTML:

    render() {        return (                <div className="um-content">                    <div className="um-input-text">                        <input type="password" className="form-control" placeholder="設定密碼" onChange={(e)=>this.handleChange('pwd',e)} />                    </div>                    <div className="um-input-text">                        <input type="password" className="form-control" placeholder="確認密碼" onChange={(e)=>this.handleChange('newPwd',e)}/>                    </div>                    <button className="um-btn go-next-step" onClick={(e)=>this.clickRegister(e)}>{this.props.buttonText}</button>                </div>        )    }

明天開始整合成js的代碼，保證功能的前提下，代碼規範，注釋明確，易用，介面整理。