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


Posted in Javascript onOctober 27, 2017

微信小程序 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
      });
    }

  },

})

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Packer 3.0 JS压缩及混淆工具 下载
May 03 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
Jun 20 Javascript
js字母大小写转换实现方法总结
Nov 13 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
ReactJS实现表单的单选多选和反选的示例
Oct 13 Javascript
AngularJs 终极购物车(实例讲解)
Nov 08 Javascript
Vue shopCart 组件开发详解
Jan 26 Javascript
基于 D3.js 绘制动态进度条的实例详解
Feb 26 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
Sep 12 Javascript
layui复选框限制选择个数的方法
Sep 18 Javascript
学前端,css与javascript重难点浅析
Jun 11 Javascript
vue通过接口直接下载java生成好的Excel表格案例
Oct 26 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 #Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 #Javascript
本地搭建微信小程序服务器的实现方法
Oct 27 #Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 #Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 #Javascript
微信小程序promsie.all和promise顺序执行
Oct 27 #Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 #Javascript
You might like
PHP+SQL 注入攻击的技术实现以及预防办法
2011/01/27 PHP
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
Laravel搭建后台登录系统步骤详解
2016/07/26 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
php集成开发环境详解
2019/09/24 PHP
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
javascript iframe编程相关代码
2009/12/28 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
IE下JS读取xml文件示例代码
2013/08/05 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
Vue表单实例代码
2016/09/05 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
python编码总结(编码类型、格式、转码)
2016/07/01 Python
用pickle存储Python的原生对象方法
2017/04/28 Python
浅谈python数据类型及类型转换
2017/12/18 Python
python Celery定时任务的示例
2018/03/13 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
.net工程师笔试题
2012/06/09 面试题
周年庆典邀请函范文
2014/01/23 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
竞选部门副经理的自荐书范文
2014/02/11 职场文书
高中学生评语大全
2014/04/25 职场文书
人事经理岗位职责
2014/04/28 职场文书
学习焦裕禄同志为人民服务思想汇报
2014/09/10 职场文书
创业计划书之农家乐
2019/10/09 职场文书