微信小程序 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 相关文章推荐
JavaScript全排列的六种算法 具体实现
Jun 29 Javascript
js中的for如何实现foreach中的遍历
May 31 Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
Sep 01 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
详解Bootstrap glyphicons字体图标
Jan 04 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 Javascript
JavaScript中 DOM操作方法小结
Apr 25 Javascript
angular 组件通信的几种实现方式
Jul 13 Javascript
详解使用mpvue开发github小程序总结
Jul 25 Javascript
create-react-app安装出错问题解决方法
Sep 04 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
Zend的MVC机制使用分析(二)
2013/05/02 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
jQuery之日期选择器的深入解析
2013/06/19 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
Javascript的this用法
2017/01/16 Javascript
原生JS+Canvas实现五子棋游戏实例
2017/06/19 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
在vue中axios设置timeout超时的操作
2020/09/04 Javascript
跟老齐学Python之玩转字符串(2)更新篇
2014/09/28 Python
python hbase读取数据发送kafka的方法
2018/12/27 Python
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
聊聊python中的异常嵌套
2020/09/01 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
python实现发送邮件
2021/03/02 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
Myprotein蛋白粉美国官网:欧洲畅销运动营养品牌
2016/11/15 全球购物
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
售后服务科岗位职责范文
2013/11/13 职场文书
生产部统计员岗位职责
2014/01/05 职场文书
做人民满意的公务员活动方案
2014/08/25 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
个人简历求职信范文
2015/03/20 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
2016年中秋祝酒词
2015/11/26 职场文书
springboot如何初始化执行sql语句
2021/06/22 Java/Android