微信小程序中输入输入及动态设置按钮的实现方法

  介绍

这篇文章给大家分享的是有关微信小程序中输入输入及动态设置按钮的实现方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

<强>微信小程序输入输入及动态设置按钮的实现

【需求】实现当手机号已填写和协议已勾选时,“立即登录”按钮变亮,按钮可点击;若有一个不满足,按钮置灰,不可点击;实现获取短信验证码,倒计时提示操作,对不满足要求内容进行面包弹窗提示。

& lt; view 类=癱ontainer"比;   & lt;才能!——手机号——比;   & lt;才能view 类=皊ection"比;   ,,,& lt; text 类=皌xt"祝辞手机号& lt;/text>   ,,,& lt; input 价值=https://www.yisu.com/zixun/皗{移动}}占位符类”=罢嘉环闭嘉环?笆晃皇只怕? type="数量"最大长度=笆弧?   bindinput=" mobileInput "/>         <视图类="节">   <视图>   <文本类="三">图形验证码   <输入占位符类=罢嘉环闭嘉环?"输入图形验证码" type="文本"最大长度=?”   bindinput=" imgCaptchaInput "/>         <图象类=" imgBtn " src=" {{imgCodeSrc}}”bindtap=" getImgCode ">         <视图类="节">   <视图>   <文本类="三">验证码   <输入占位符类=罢嘉环闭嘉环?"输入验证码" type="数量"最大长度=?”   bindinput=" smsCaptchaInput "/>         <视图类=" smsBtn“bindtap=" getSMS "> {{captchaText}}         <视图类=巴狻狈绺?" margin-top: 40 rpx ">   <复选框组bindchange=" checkboxChange ">   <复选框类="检查" value=" 1 "=" true "检查bindchange=" checkboxChange ">      已阅读并同意 <文本样式=把丈?# 98 c7ff”bindtap="写意">《用户使用协议》      <视图类=" regist {{phoneAll&&checkAgree吗?“活跃”:“}}”bindtap=" regist ">立即登录         <视图类=" toast_mask”天气:如果=" {{isShowToast}} ">      <视图类=" toast_content_box”天气:如果=" {{isShowToast}} ">   <视图类=" toast_content ">   <视图类=" toast_content_text ">   {{toastText}}         

js

//,获取全局应用程序实例对象   const  app =, getApp ()      页面({   ,,数据:{   ,,,//面包默认不显示   ,,,isShowToast:,假的,   ,,,手机:,& # 39;& # 39;   ,,,imgCode:, & # 39; & # 39;   ,,,代码:,& # 39;& # 39;   ,,,//,inviteCode:, & # 39; & # 39;   ,,,errorContent:, & # 39;请输入手机号& # 39;,   ,,,计时器:,60岁,   ,,,captchaText:, & # 39;获取验证码& # 39;,   ,,,captchaSended:,假的,   ,,,isReadOnly:,假的,   ,,,capKey:, & # 39; & # 39;   ,,,sendRegist:,假的,   ,,,imgCodeSrc:, & # 39; & # 39;   ,,,phoneAll:,假的,   ,,,checkAgree:没错,   ,,,checkboxValue: [1],   ,,},//,才能显示弹窗   showToast才能(txt, duration =, 1500), {   ,,,//设置烤面包时间,面包内容   ,,,this.setData ({   ,,,,,数:,,   ,,,,,toastText:三种   ,,,});   ,,,var  _this =,;   ,,,//,烤面包时间   ,,,_this.data.count =,方法(_this.data.count), ?,方法(_this.data.count),:, 3000;   ,,,//,显示吐司   ,,,_this.setData ({   ,,,,,isShowToast:,真的,   ,,,});   ,,,//,定时器关闭   ,,,setTimeout (function  (), {   ,,,,,_this.setData ({   ,,,,,,,isShowToast:假   ,,,,,});   ,,,},,_this.data.count);   ,,},//才能,双向绑定移动   mobileInput才能(e), {   ,,,this.setData ({   ,,,,,手机:e.detail.value   ,,,});      ,,,如果(this.data.mobile.length===11) {   ,,,,,this.setData ({   ,,,,,,,phoneAll:真实   ,,,,,});   ,,,}else 如果(this.data.mobile.length<11) {   ,,,,,this.setData ({   ,,,,,,,phoneAll:假   ,,,,,});   ,,,}   ,,},//才能,双向绑定img验证码   imgCaptchaInput才能(e), {   ,,,this.setData ({   ,,,,,imgCode: e.detail.value   ,,,});   ,,},//才能,双向绑定短信验证码   smsCaptchaInput才能(e), {   ,,,this.setData ({   ,,,,,代码:e.detail.value   ,,,});   ,,},//,才能同意协议   checkboxChange才能(e), {   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null

微信小程序中输入输入及动态设置按钮的实现方法