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