全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[淮北seo公司都选久澳]微信小程序中input输入及动态设置按钮的实现

  这篇文章主要介绍了微信小程序 input输入及动态设置按钮的实现的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下

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

  【需求】实现当手机号已填写和协议已勾选时▪=…,“立即登录”按钮变亮,按钮可点击;若有一个不满足…◇▲,按钮置灰,介休市小程序制作公司不可点击;实现获取短信验证码●-●,倒计时提示操作☆●;对不满足要求内容进行toast弹窗提示◇•★□。

  

 

  

<◆▽○•;view class="container">
 <◁▼;!--手机号-->
 <•☆;view class="section">
 <text class="txt">手机号<○=;/text>==○•;
 <■•◇…;input value="▽★-◇;{{mobile}}"--•; placeholder-class="◁…◆=;placeholder"☆▼★☆; placeholder="=-;11位手机号码" type="number" maxlength="△△◆;11"•△▪;
 bindinput="●◆★;mobileInput"▽…△;/>
 </view>
 <!--图片验证码-->
 <▲★•;view class="◁▽◇-;section">
 <view>
 <text class="▪◇☆;txt"◁★…□;>图形验证码<▪=…▷;/text>
 <◁◇△▼;input placeholder-class="placeholder"△-; placeholder="输入图形验证码"●…▲△; type="text"●▲•□; maxlength="4"
 bindinput="imgCaptchaInput"/>
 </view>
 <image class="imgBtn" src="{{imgCodeSrc}}" bindtap="getImgCode"></image>…▪▼◁;
 <▪▲▽☆;/view>
 <●◆;!--短信验证码-->•●▪;
 <○=;view class="section"◆▼•△;>★■-◁;
 <○▷;view>
 <=○…;text class="▷…●;txt">验证码</text>
 <★•…△;input placeholder-class="placeholder" placeholder="输入验证码"▷●▲; type="number" maxlength="6"
 bindinput="•☆◇☆;smsCaptchaInput"/>◆-◆;
 <☆-■◆;/view>◁▼;
 <★•;view class="smsBtn" bindtap="△◆•▪;getSMS">▲△;{{captchaText}}<☆▼☆;/view>
 <▲◆☆;/view>
 <view class="agree" style="margin-top:40rpx">…▼■=;
 <checkbox-group bindchange="checkboxChange"•▪◇;>
 <checkbox class="•◇;check" value="1" checked="true" bindchange="checkboxChange">•▷;</checkbox>●◆;
 <■▼;/checkbox-group>
 <span>已阅读并同意</span> <text style="•■;color▷▽:#98c7ff" bindtap="xieyi">《用户使用协议》</text>
 </view>
 <view class="regist {{phoneAll&&checkAgree?'●•;active':'▽…;'}}" bindtap="…▲◇;regist"▷□■;>◇■;立即登录</view>▲◁•…;
</view>
 <!--mask-->•☆-•;
<▲◁;view class="toast_mask" wx:if="△□;{{isShowToast}}">○-•○;</view>△★◆…;
 <!--以下为toast显示的内容-->
<○…--;view class="toast_content_box"☆◁◇●; wx=☆▷:if="•▼;{{isShowToast}}"▷▽;>△●-;
<view class="toast_content">▷☆▪;
 <view class="toast_content_text"▽☆=•;>
 {{toastText}}
 </view>▲▼△◇;
</view>
</view>▼▽●;

 

  js

  

 

  

// 获取全局应用程序实例对象
const app = getApp()
Page({
 data-○◇: {
 //toast默认不显示
 isShowToast: false,
 mobile: '●•;'▷…▪★;,
 imgCode: '◆△;',
 code: '',
 // inviteCode: ''▷▪;□○•☆,
 errorContent: '请输入手机号',
 timer: 60,
 captchaText=…◆▽: '获取验证码',
 captchaSended: false,
 isReadOnly: false,
 capKey: ''★▷•;,
 sendRegist: false,
 imgCodeSrc: ''■★,
 phoneAll: false,
 checkAgree:true,
 checkboxValue:[1]◆•…-,
 },
 // 显示弹窗
 showToast(txt, duration = 1500) {
 //设置toast时间▲☆=•,富德市小程序制作公司toast内容
 this=★•◁.setData({
 count-•◆: duration-◆,
 toastText: txt
 });
 var _this = this▼=◁;
 // toast时间
 _this◇◆…▪.data.count = parseInt(_this.data▪■.count) ? parseInt(_this★○▪•.data▲▪○.count) : 3000;
 // 显示toast
 _this.setData({
 isShowToast▼▷: true,
 });
 // 定时器关闭
 setTimeout(function () {
 _this○●…….setData({
 isShowToast: false
 });
 }, _this.data.count);
 },
 // 双向绑定mobile
 mobileInput(e) {
 this•☆.setData({
 mobile: e.detail.value
 });
 if(this.data.mobile.length===11){
 this◁-.setData({
 phoneAll: true
 })-▲;
 }else if(this◁■★.data.mobile.length<11){
 this■◇.setData({
 phoneAll: false
 });
 }
 },
 // 双向绑定img验证码
 imgCaptchaInput(e) {
 this.setData({
 imgCode: e.detail.value
 });
 },
 // 双向绑定sms验证码
 smsCaptchaInput(e) {
 this.setData({
 code: e…▼-.detail.value
 });
 },
 // 同意协议
 checkboxChange(e) {
 this▷△◁.data☆●○.checkboxValue = e.detail.value▼-△●;
 if(this.data▽•☆.checkboxValue[0]==1){
 this.setData({
 checkAgree•=: true
 });
 }else {
 this.setData({
 checkAgree: false
 })▼•;
 }
 },
 // 获取短信验证码
 getSMS() {
 var that = this.data…◇;
 if (!that.mobile) {
 this.showToast('请输入手机号')▲◆;
 } else if (that…△.mobile●★▪.length != 11 

 

   isNaN(that▲▼▼■.mobile)) { this.showToast('请输入正确手机号'▷□◁;)★•; } else if (that.imgCode.length •…▷☆!= 4) { this.showToast('请输入正确图片验证码'); } else { if (that▪■△.captchaSended) return•■•▽; this.setData({ captchaSended: true }) app.api•◇.getSMSByMobileAndCaptcha({ mobile: that.mobile, capKey: that.capKey, code: that=….imgCode, type:1 })☆○….then((result) => { this.showToast(result.message)☆-; if (result★●☆.code != 1) { this.getImgCode(); this.setData({ captchaSended: false, }); } else { var counter = setInterval(() => { that★□○.timer--; this.setData({ timer•-▪△: that•■.timer, captchaText: `${that.timer}秒`▲▼, isReadOnly: true }); if (that.timer === 0) { clearInterval(counter); that.captchaSended = false…▪…; that.captchaText = '获取验证码'-▷;; this.setData({ timer▽◆: 60▼★, captchaText▪■: '◇▪-☆;获取验证码'▪▽=◆;, captchaSended: false }) } }-●●▪, 1000); } })★△☆◁; } }, // 获取图形码 getImgCode() { var capKey = "zdx-weixin"=…▪=; + Math.random(); this.setData({ imgCodeSrc◇■: "--□★;http://prezdx•….geinihua.com/invite/WeChat/verify▪★▪-?capKey=" + capKey, capKey: capKey }); }, //用户使用协议 xieyi() { wx.navigateTo({ url◁□: '../userXieyi/userXieyi' }) }, // 注册 regist() { var that = this.data; if(!that■★.checkAgree

  ◁▽▷▼!that.phoneAll){ return } // sessionCheck为1,目的是防止微信code码先于session过期 var code = wx.getStorageSync('wxCode'); var sessionCheck = wx-◆.getStorageSync('◇▽;sessionCheck'); wx○▲○.setStorageSync('mobile'△□▼□;,that.mobile); if (!that☆★.mobile) { this.showToast('=◁;请输入手机号'); } else if (that.mobile.length != 11

   isNaN(that.mobile)) { this.showToast('请输入正确手机号'); } else if (that.code.length != 6) { this.showToast('请输入正确验证码'★=;); } else { wx.showLoading({ title: '加载中▽▷=▽.○◁-◆..'•▲☆■, }); app.api.loginByCaptcha({ mobile: that.mobile, smsCode: that.code, code: code, sessionCheck:sessionCheck, }).then((res) =>☆■…=; { wx.hideLoading()•▲▽; if (res.code == 2

  res.code==1) { //注册成功 wx.setStorageSync('token'▪◆;, res.businessObj.token)◇☆□▼; wx.setStorageSync('◇◁•;userId',res.businessObj.userId); this.sucessCb(res)▽◇☆•; app.globalData.isLogin = true; //设置为登录成功 } else { this.showToast(res.message); } }); } }, // 成功回调 sucessCb(res) { wx■◁□.redirectTo({ url▪■: '/pages/index/index' }) }, onLoad: function () { this.getImgCode(); var that=this; if(wx.getStorageSync('★◆△;mobile'☆▲;)){ that•★◁•.setData({ mobile: wx.getStorageSync('◁…;mobile'), }) } if(this.data.mobile.length===11){ this.setData({ phoneAll▽●: true }); } }◇▪•★, })

 

  以上就是本文的全部内容,10 2020.10 [SEO网站权重好的公司]phpmyadmin在宝塔面板无法登录 一、没开放888端口 当我们进phpmyadmin的时候,端口默认为888,[SEO网站权重好的公司]这时,我们就要检查宝塔面板和阿里云控制器里的安全组的888端口是否开放。 1、先检查宝塔面板里面,希望对大家的学习有所帮助,[淮北seo公司都选久澳]更多相关内容请关注PHP中文网▷▲○!

  相关推荐:

  微信小程序 scroll-view实现上拉加载与下拉刷新的实例

  微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法

  微信小程序实现点击按钮移动view标签的位置功能

  

 

  以上就是微信小程序中input输入及动态设置按钮的实现的详细内容,如何制作小程序更多请关注久澳传媒编程栏目其它相关文章!

[淮北seo公司都选久澳]微信小程序中input输入及动态设置按钮的实现

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。