mobile开发规范之注册模块react代码讲解

登录注册，react写的。注册主要是获取验证码，验证码验证，注册密码。

模块代码：

验证码：

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

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 (  
            <p className="um-content">  
                <p className="um-input-text">  
                    <input type="text" className="form-control" placeholder="请输入手机号" value={this.state.phone} onChange={(e)=>this.handlerChange('phone',e)} />  
                </p>  
                <p className="um-input-text pr">  
                    <input type="text" className="form-control" placeholder="图形验证码" value={this.state.imgContent} onChange={(e)=>this.handlerChange('imgContent',e)}/>  
                    <p  className="img-container" onClick={(e)=>this.getImgSrc(e)}>  
                        <img src={this.state.imgSrc} alt="" className="randomImg"/>  
                    </p>  
                </p>  
                <span className="friendly-tips">看不清？点击切换图片</span>  
                <p 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>  
                </p>  
                <button className="um-btn go-next-step" onClick={(e)=>this.handleBtnClick(e)}>{btnText}</button>  
            </p>  
    )  
}  

注册：

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

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 (  
            <p className="um-content">  
                <p className="um-input-text">  
                    <input type="password" className="form-control" placeholder="设置密码" onChange={(e)=>this.handleChange('pwd',e)} />  
                </p>  
                <p className="um-input-text">  
                    <input type="password" className="form-control" placeholder="确认密码" onChange={(e)=>this.handleChange('newPwd',e)}/>  
                </p>  
                <button className="um-btn go-next-step" onClick={(e)=>this.clickRegister(e)}>{this.props.buttonText}</button>  
            </p>  
    )  
}  

明天开始整合成js的代码，保证功能的前提下，代码规范，注释明确，易用，接口整理。