小程序短信验证码页面实现demo

更新时间：2023年11月29日 10:11:15 作者：freeman_Tian

这篇文章主要为大家介绍了小程序短信验证码页实现demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

小程序短信验证码

难点主要是样式设计，以及bindinput="Focus" 事件的控制

页面结构

<view class="container">
  <nav-bar bind:left="goBack" />
  <view class='login-form-page'>
    <view class="title">
      输入短信验证码
    </view>
    <view class="tittxt">短信验证码已发送至{{phone}}</view>
    <view class="content">
      <view>
        <form>
          <view class='inpcontent'>
            <block wx:for="{{Length}}" wx:key="item">
              <input
                class='iptbox'
                style="background-color: {{inpVal.length==index?'#1194FB':''}}; box-shadow:{{inpVal.length==index?'0rpx 3rpx 10rpx 3rpx rgba(17,148,251,0.17)':''}};background-color: {{inpVal.length+1==index?'#FFFFFF':''}}; box-shadow:{{inpVal.length+1==index?'0rpx 3rpx 10rpx 3rpx #E1E1E1':''}};background-color:{{whether?'#FF3334':''}}; box-shadow:{{whether?'0rpx 3rpx 10rpx 3rpx rgba(254,54,49,0.26)':''}};clear: {{whether?'#FFFFFF':''}}; "
                value="{{inpVal.length>=index+1?inpVal[index]:''}}"
                disabled
                password='{{ispassword}}'
                catchtap='Tap'
              ></input>
              
            </block>
            
          </view>
          
          <input
            name="password"
            password="{{true}}"
            class='ipt'
            maxlength="{{Length}}"
            focus="{{isFocus}}"
            bindinput="Focus"
          ></input>
          
        </form>
      </view>
      <view class="mistake" wx:if="{{whether}}">
        验证码有误，请重新输入
      </view>
      <button class='btn' wx:if="{{coding==0}}">
        {{time}}秒后重新发送
      </button>
      <button
        class="btn btn-active"
        wx:if="{{coding==1}}"
        bindtap="resetCode"
      >
        重新发送
      </button>
    </view>
  </view>
</view>

js代码

import { phonePwd } from '../../utils/common';
import { mobileSms } from '../../api/me/index';
Page({
    /**
     \* 页面的初始数据
     */
    data: {
        phone: '',
        Length: 4, // 输入框个数
        isFocus: true, // 聚焦
        inpVal: '', // 输入的内容
        ispassword: false, // 是否密文显示 true为密文， false为明文。
        time: 60,
        // 显示是否重新发送
        coding: 0,
        reqCode: '', // 验证码
        // 手机号
        cell: '',
        // 验证成功与否
        whether: false
    },
    // 60秒倒计时结束后可再次发送验证码
    async resetCode() {
        const info = wx.getStorageSync('userInfo');
        let params = {
            phone: info.phone,
            smsType: 'CHANGE_PASSWORD'
        };
        await mobileSms(params).then(res => {
            console.log(res);
            this.setData({
                reqCode: Number(res),
                coding: 0
            });
            // 计时60秒结束可返回上一个页面重新发送验证码
            let second = setInterval(() => {
                this.data.time--;
                this.setData({
                    time: this.data.time
                });
                if (this.data.time <= 0) {
                    clearInterval(second);
                    this.setData({
                        coding: 1,
                        time: 60
                    });
                }
            }, 1000);
        });
    },
    // input事件位置
    Focus(e) {
        const inputValue = e.detail.value;
        this.setData({
            inpVal: inputValue
        });
        // 验证码输入完毕会进行判断
        console.log(this.data.inpVal, this.data.reqCode);
        if (this.data.inpVal.length === 4) {
            // 在这里判断输入的是否错误如果错误的话就让whether=true，否则false
            if (this.data.inpVal === this.data.reqCode) {
                this.setData({
                    whether: false
                });
                wx.$wxApi.navigate(`/me/pwd/index?smsCode=${this.data.reqCode}`);
            } else {
                this.setData({
                    whether: true
                });
            }
        }
    },
    Tap() {
        const that = this;
        that.setData({
            isFocus: true
        });
    },
    onReady() {
        this.init();
    },
    /* 初始化数据 */
    async init() {
        const pho = wx.getStorageSync('userInfo').phone;
        this.setData({ phone: phonePwd(pho) });
        let params = {
            phone: pho,
            smsType: 'CHANGE_PASSWORD'
        };
        await mobileSms(params).then(res => {
            console.log(res);
            this.setData({
                reqCode: String(res)
            });
        });
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad() {
        // this.setData({
        //     cell: options.cell
        // });
        // 计时60秒结束可返回上一个页面重新发送验证码
        let second = setInterval(() => {
            this.data.time--;
            this.setData({
                time: this.data.time
            });
            if (this.data.time <= 0) {
                clearInterval(second);
                this.setData({
                    coding: 1,
                    time: 60
                });
            }
        }, 1000);
    },
    goBack() {
        wx.navigateBack();
    },
    /**
     \* 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     \* 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     \* 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     \* 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     \* 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     \* 用户点击右上角分享
     */
    onShareAppMessage() {}
});

css样式

.container {
    height: 100vh;
    background: #d8d8d8 linear-gradient(180deg, #ffffff 0%, #e0e3e9 100%);
    position: relative;

    .login-form-page {
        position: relative;
        padding: 118rpx 40rpx 0;
        height: 100vh;
        box-sizing: border-box;
        background: linear-gradient(180deg, #F2F2F2 0%, #FFFFFF 100%), linear-gradient(180deg, #FFFFFF 0%, #E0E3E9 100%);
    }
    .title {
        margin-top: 104rpx;
        line-height: 80rpx;
        font-size: 56rpx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #1a1b1c;
    }
    .tittxt {
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #676e6f;
        line-height: 40rpx;
    }
    .btn {
        // margin-top: 80rpx;
        height: 96rpx;
        line-height: 96rpx;
        font-size: 28rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        background: #dadee1;
        border-radius: 16rpx;
        border: 0 none;
        &-active {
            background: #1d2129;
        }
    }
}
.content_time {
    font-size: 24rpx;
    font-weight: 400;
    color: #858585;
    letter-spacing: 1px;
    text-align: center;
    margin-top: 30rpx;
}
.inpcontent {
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 100rpx;
    padding: 0 62rpx;
}
.iptbox {
    width: 100rpx;
    height: 100rpx;
    border: 1rpx solid #ddd;
    border-radius: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #fff;
    font-weight: 400;
    font-size: 30rpx;
    color: #202020;
}
.ipt {
    width: 0;
    height: 0;
}
.btn-area {
    width: 80%;
    background-color: orange;
    color: white;
}
.mistake {
    font-size: 22rpx;
    font-weight: 400;
    color: #c34d55;
    line-height: 30rpx;
    letter-spacing: 1px;
    text-align: center;
}

以上就是小程序短信验证码页面实现demo的详细内容，更多关于小程序短信验证码页的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

js实现带缓冲效果的仿QQ面板折叠菜单代码
这篇文章主要介绍了js实现带缓冲效果的仿QQ面板折叠菜单代码,通过JavaScript定时函数递归调用实现折叠菜单的缓冲效果,具有一定参考借鉴价值,需要的朋友可以参考下
2015-09-09
JavaScript九九乘法口诀表的简单实现
这篇文章主要介绍了JavaScript乘法口诀表的简单实现，文中给出了详细的示例代码，这样对大家的理解和学习更有帮助，有需要的朋友们可以参考借鉴，下面来一起看看吧。
2016-10-10
如何在TypeScript使用模块化以及注意事项详解
在TypeScript中就像在EC5中一样,任何包含顶级import或export的文件都被认为是一个模块,下面这篇文章主要给大家介绍了关于如何在TypeScript使用模块化以及注意事项的相关资料,需要的朋友可以参考下
2022-10-10
js 一个关于图片onload加载的事
前几天一个项目让我头疼了很久，一个关于图片加载时的loading效果，因为不是太懂js，所以在网上各种找资料，但还是不理想，无赖苦心研究，终于有了一点眉目了，虽然个中还有一些道理不懂，至少目的达到了
2013-11-11
JS 按钮点击触发(兼容IE、火狐)
这篇文章介绍了JS 按钮点击触发，有需要的朋友可以参考一下
2013-08-08
js实现select二级联动下拉菜单
这个是简单也是最基本的下拉框联动的示例，这个示例主要针对那些只有二级联动，且第一级是固定的选项，第二级的内容也比较简单，不刷新的联动，感兴趣的小伙伴们可以参考一下
2016-04-04
jQuery中选择查找自定义属性具有特定值的所有元素
同样在HTML5可以通过data-自定义属性名来给元素添加自定义的属性名。一旦添加完成之后。通过JS可以获取以及设置自定义属性。这篇文章主要介绍了jQuery中选择查找自定义属性具有特定值的所有元素
2023-02-02
一步步教你利用Canvas对图片进行处理
这篇文章主要给大家介绍了关于利用Canvas对图片进行处理的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2017-09-09
JavaScript获得页面base标签中url的方法
这篇文章主要介绍了JavaScript获得页面base标签中url的方法,涉及javascript中元素的获取及href属性的使用技巧,需要的朋友可以参考下
2015-04-04
js如何读取csv内容拼接成json
这篇文章主要介绍了js如何读取csv内容拼接成json，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09

小程序短信验证码页面实现demo

目录

小程序短信验证码

页面结构

js代码

css样式

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具