在此描述一下前端实现效果的思路：当用户输入完手机号，点击发送验证码时候，要判断现在能否点击（能点击：用户手机号正确且不在发送验证码过程中；不能点击：用户输入的手机号不对或者已经在发送验证码过程中），然后做相应的处理。
wxml代码：
<form bindsubmit=\'formsubmit\'> <view class=\'people_info_box\'> <view class=\'people_info_item\'> <view class=\'people_info_box_name\'> <view>姓名</view> </view> <view class=\'people_info_box_cont\'> <input type=\'text\' value=\'哈喽\'></input> </view> </view> <view class=\'people_info_item\'> <view class=\'people_info_box_name\'> <view>手机号</view> </view> <view class=\'people_info_box_cont\'> <input type=\'number\' placeholder=\'输入手机号\' maxlength=\'11\' bindinput=\'input_val\'></input> </view> </view> <view class=\'people_info_item\'> <view class=\'people_info_box_name\'> <view>验证码</view> </view> <view class=\'people_info_box_contsinge\'> <input type=\'text\' value=\'\' placeholder=\'输入验证码\' class=\'single\'></input> </view> <view class=\'people_info_box_code\'> <text bindtap=\'check\'>{{show_get_code}}</text> </view> </view> </view> <button class=\'wc_btn\' name="wc_btn" form-type=\'submit\'>提交</button> </form>
Page({ data: { login_member: \'\', //输入的手机号 login_code: null, //传过来的验证码 input_login_code: \'\', //用户输入的验证码 get_code_status: true, //是否能点击获取验证码的状态判断 show_get_code: \'获取验证码\', get_code_time: 60 }, onLoad: function (options) { }, input_val:function(e){ var userphone = e.detail.value; this.setData({ login_member: userphone }) }, check: function () { if (!this.data.get_code_status) { wx.showToast({ title: \'正在获取\', icon: \'loading\', duration: 1000 }) return; } else { if (this.data.login_member.length == 11) { var myreg = /^1\d{10}$/; if (!myreg.test(this.data.login_member)) { wx.showToast({ title: \'请输入正确的手机号\', icon: \'loading\', duration: 1000 }); return; } else { this.get_code(); } } else { wx.showToast({ title: \'请输入完整手机号\', icon: \'loading\', duration: 1000 }) return; } } }, get_code: function () { var that = this; wx.request({ url:\'\', data: { mobile: that.data.login_member }, success: function (res) { if (res.data.status == 1) { var timer = setInterval(function () { if (that.data.get_code_time > 0) { // console.log(that.data.get_code_time); that.setData({ get_code_time: that.data.get_code_time - 1, show_get_code: \'剩余\' + (that.data.get_code_time - 1) + \'秒\', get_code_status: false }); } else { clearInterval(timer); that.setData({ get_code_time: 60, show_get_code: \'获取验证码\', get_code_status: true }); } }, 1000); that.setData({ login_code: res.data.data.code //后台返回的验证码，可以做判断用 }); } else { wx.showToast({ title: res.data.message, icon: \'loading\', duration: 1000 }); } }, fail: function (res) { wx.showToast({ title: \'请求失败\', icon: \'loading\', duration: 1000 }); } }); } })
