1.

完成手机验证码的功能：

2.

（1）效果图如下：

3.

（开始发送验证码）（重新发送验证码）

4.

（2）需求及思路说明：

输入正确的11位手机号，使用正则校验。校验手机号的归属地----北京移动（这个根据需求而定）点击“获取验证码”，获取成功与失败，都会以弹框的形式展现，完成倒计时。倒计时为‘0’的时候，按钮文字变成“重新发送”当按钮是“获取验证码”和“重新发送”的时候，按钮是可以点击进行倒计时的在倒计时过程中，按钮是不可点击的（也就是防止在倒计时的过程中重复点击）5.

.wxml文件

blockwx:if'{{show_detail_title}}'viewclass'show_detail_cententver_phone_con'formviewclass'show_detail_centent_titlever_title'验证/viewviewclass'error_tip}}'style"{{error_tiptrue?'visibility:visible':'visibility:hidden'}}"{{error_tip_txt}}/viewviewclass'phone_verification'viewclass'ver_item'inputtype'text'class'phone_number'value"{{telNumber}}"bindinput"input_phone"placeholder-style'color:#cdcdcd'placeholder'请获取手机号'/buttontype"primary"formType"submit"class'get_phone_number'open-type"getPhoneNumber"bindgetphonenumber"getPhoneNumber"获取手机号/button/viewviewclass'last_phone_numberver_item'inputtype'number'class'phone_number'bindinput"input_code"value'{{phone_code}}'placeholder-style'color:#cdcdcd'placeholder'验证码'/buttontype"primary"formType"submit"class'get_phone_number'bindtap"getPhoneCode"disabled'{{code_show}}'{{login_VerifyCode}}/button/viewbuttontype"primary"formType"submit"class'finish_btn'disabled'{{finish_show}}'bindtap"submit_finish"完成/buttonviewclass'phone_tip'注：办理******需验证手机号码/view/view/form/view/block6.

.js文件

data:{login_VerifyCode:'获取验证码',telNumber:'',//用户手机号phone_code:'',//手机验证码error_tip:false,//获取手机号、验证码的错误提示error_tip_txt:'',//错误信息提示内容code_show:false,//重复点击获取验证码},//获取手机验证码getPhoneCode:function(){if(this.data.login_VerifyCode'获取验证码'||this.data.login_VerifyCode'重新发送'){lettelNumberthis.data.telNumber;console.log('获取验证码',telNumber.length);console.log(util.regNumber(telNumber));if(telNumber''){this.setData({error_tip:true,error_tip_txt:'请输入手机号码'})}elseif(telNumber.length!11){this.setData({error_tip:true,error_tip_txt:'请输入正确的手机号码'})}else{//验证是否是北京移动的手机号码varurl'/v1/broadband/isBJMobiel.do';varparams{session:wx.getStorageSync('session'),phone:telNumber}httpUtil.postData(url,params,'',(res){console.log('判断手机号码的',res);if(res.module"N"){this.setData({error_tip:true,error_tip_txt:'此手机号非北京移动用户',code_show:true})}else{varurl'/v1/bdbrokerRenewal/authSendMsg.do';varparams{session:wx.getStorageSync('session'),phone:telNumber};httpUtil.postData(url,params,'',(res){console.log(res);if(res.success){wx.showToast({title:'短信验证码发送成功，请注意查收',icon:'success',duration:2000})vartotal_micro_second60;//验证码倒计时this.count_down(total_micro_second);}else{that.setData({login_tip:"验证码发送失败，请稍候重试"});}});}});}}},//倒计时验证码count_down:function(total_micro_second){//发送验证码按钮varthatthis;if(total_micro_second0){that.setData({login_VerifyCode:"重新发送"});//timeout则跳出递归returnfalse;}else{//渲染倒计时时钟that.setData({login_VerifyCode:total_micro_second+"s"});total_micro_second--;if(that.data.login_timertrue){setTimeout(function(){that.count_down(total_micro_second);},1000)}else{that.setData({login_VerifyCode:"获取验证码"});}}},//输入框失去焦点手机号input_phone:function(e){console.log('手机号码',e);this.setData({telNumber:e.detail.value,error_tip_txt:''})this.color_finish();},//输入框输入验证码input_code:function(e){console.log('验证码值',e);this.setData({phone_code:e.detail.value})this.color_finish();},//完成提交按钮颜色变化color_finish:function(){if(telNumber_status(this.data.telNumber)code_status(this.data.phone_code)){this.setData({finish_show:false})}else{this.setData({finish_show:true})}},//判断全国号段constregNumbermobile{varmove/^((134)|(135)|(136)|(137)|(138)|(139)|(147)|(150)|(151)|(152)|(157)|(158)|(159)|(178)|(182)|(183)|(184)|(187)|(188)|(198))d{8}$/g;//移动varlink/^((130)|(131)|(132)|(155)|(156)|(145)|(185)|(186)|(176)|(175)|(170)|(171)|(166))d{8}$/g;//联通vartelecom/^((133)|(153)|(173)|(177)|(180)|(181)|(189)|(199))d{8}$/g;//电信if(move.test(mobile)){returntrue;}elseif(link.test(mobile)){returntrue;}elseif(telecom.test(mobile)){returntrue;}else{returnfalse;}}7.

以上根据思路说明，把条理梳理清晰，也就能顺利完成。