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的代码，保证功能的前提下，代码规范，注释明确，易用，接口整理。