亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

微信小程序手機(jī)號(hào)驗(yàn)證碼登錄的項(xiàng)目實(shí)現(xiàn)

 更新時(shí)間:2022年04月02日 11:10:07   作者:七彩貓貓蟲(chóng)  
本文主要介紹了微信小程序手機(jī)號(hào)驗(yàn)證碼登錄的項(xiàng)目實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

本文主要介紹了小程序手機(jī)號(hào)驗(yàn)證碼登錄,具體如下:

在這里插入圖片描述

在這里插入圖片描述

wxml:

<view class="content_bottom">
      <form bindsubmit="formSubmit">
        <view class="field">
          <label for="phone">手機(jī)號(hào)</label>
          <input class="int" name="phone" type="number" placeholder="請(qǐng)輸入手機(jī)號(hào)碼" placeholder-class="pla2" value='{{phone}}' bindinput='getPhoneValue'  />
        </view>
        <view class="field">
          <label for="phone">手機(jī)驗(yàn)證碼</label>
          <view class='changeInfoName'>
            <input type="number" placeholder='請(qǐng)輸入驗(yàn)證碼' bindinput='getCodeValue' placeholder-class="pla2" value='{[code]}' style='width:70%;' />
            <button class='codeBtn' style="background-color:{{pageBackgroundColor}}" bindtap='getVerificationCode' disabled='{{disabled}}'>{{codename}}</button>
          </view>
        </view>
        <view class="form_btn2">
          <button class="btn_login" type="primary"  formType="submit">下一步</button>
        </view>
      </form>
    </view>

js:

// pages/login/login.js
import http from '../../http/api';
import env from '../../http/evn.js';
Page({

  data: {
    phone: '',
    code: '',
    codename: '獲取驗(yàn)證碼',
  },
  getPhoneValue: function (e) {
    this.setData({
      phone: e.detail.value
    })
  },
  getCodeValue: function (e) {
    this.setData({
      code: e.detail.value
    })
  },
    //獲取驗(yàn)證碼
    getVerificationCode() {
      this.getCode();
      var _this = this
      // _this.setData({
      //   disabled: true
      // })
    },
    getCode: function () {
      console.log(this.data.phone, '手機(jī)號(hào)')
      var _this = this;
      var myreg = /^(14[0-9]|13[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])\d{8}$$/;
      if (this.data.phone == "") {
        wx.showToast({
          title: '手機(jī)號(hào)不能為空',
          icon: 'none',
          duration: 1000
        })
        return false;
      } else if (!myreg.test(this.data.phone)) {
        wx.showToast({
          title: '請(qǐng)輸入正確的手機(jī)號(hào)',
          icon: 'none',
          duration: 1000
        })
        return false;
      } else {
        _this.setData({
          disabled: true
        })
        http.sendsms({
          data: {
            phone: this.data.phone
          },
          success(res) {
            var bgColor = this.data.pageBackgroundColor == '#9db8db';
            _this.setData({
              pageBackgroundColor: bgColor
              //  iscode: res.data.data
            })
            var num = 60;
            var timer = setInterval(function () {
              num--;
              if (num <= 0) {
                clearInterval(timer);
                _this.setData({
                  codename: '重新發(fā)送',
                  disabled: false
                })
              } else {
                _this.setData({
                  codename: num + "s"
                })
              }
            }, 1000)
          }
        })
      }
    },

})

到此這篇關(guān)于微信小程序手機(jī)號(hào)驗(yàn)證碼登錄的項(xiàng)目實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)小程序手機(jī)號(hào)驗(yàn)證碼登錄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 微信小程序onLaunch異步,首頁(yè)onLoad先執(zhí)行?

    微信小程序onLaunch異步,首頁(yè)onLoad先執(zhí)行?

    這篇文章主要介紹了微信小程序onLaunch異步,首頁(yè)onLoad先執(zhí)行? 文章底部給大家介紹了小程序_onLaunch異步回調(diào)數(shù)據(jù)加載問(wèn)題的兩種解決方案,需要的朋友可以參考下
    2018-09-09
  • 微信小程序?qū)崿F(xiàn)水平時(shí)間軸

    微信小程序?qū)崿F(xiàn)水平時(shí)間軸

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)水平時(shí)間軸,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-05-05
  • 解決JS無(wú)法調(diào)用Controller問(wèn)題的方法

    解決JS無(wú)法調(diào)用Controller問(wèn)題的方法

    這篇文章主要介紹了解決JS無(wú)法調(diào)用Controller問(wèn)題的方法,需要的朋友可以參考下
    2015-12-12
  • js實(shí)現(xiàn)的仿新浪微博完美的時(shí)間組件升級(jí)版

    js實(shí)現(xiàn)的仿新浪微博完美的時(shí)間組件升級(jí)版

    本博客沒(méi)有華麗的布局,只求樸實(shí)的js的代碼,只為js代碼愛(ài)好者提供,一周大概會(huì)出1-2篇js前沿代碼的文章.只是代碼,不說(shuō)技術(shù)
    2011-12-12
  • 小程序?qū)崿F(xiàn)tab標(biāo)簽頁(yè)

    小程序?qū)崿F(xiàn)tab標(biāo)簽頁(yè)

    這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)tab標(biāo)簽頁(yè),可點(diǎn)擊切換,滑動(dòng)切換頁(yè)面,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-11-11
  • javascript順序加載圖片的方法

    javascript順序加載圖片的方法

    這篇文章主要介紹了javascript順序加載圖片的方法,可實(shí)現(xiàn)javascript針對(duì)圖片的逐次加載,從而減緩服務(wù)器壓力,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2015-07-07
  • JS中位運(yùn)算符的一些妙用

    JS中位運(yùn)算符的一些妙用

    大多數(shù)語(yǔ)言都提供了按位運(yùn)算符,恰當(dāng)?shù)氖褂冒次贿\(yùn)算符有時(shí)候會(huì)取得的很好的效果,下面這篇文章主要給大家介紹了關(guān)于JS中位運(yùn)算符的一些妙用,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-03-03
  • js實(shí)現(xiàn)帶簡(jiǎn)單彈性運(yùn)動(dòng)的導(dǎo)航條

    js實(shí)現(xiàn)帶簡(jiǎn)單彈性運(yùn)動(dòng)的導(dǎo)航條

    本篇文章主要分享了js實(shí)現(xiàn)帶簡(jiǎn)單彈性運(yùn)動(dòng)導(dǎo)航條的示例代碼,具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧
    2017-02-02
  • 通過(guò)封裝scroll.js 獲取滾動(dòng)條的值

    通過(guò)封裝scroll.js 獲取滾動(dòng)條的值

    本文通過(guò)實(shí)例代碼給大家介紹了通過(guò)封裝scroll.js 獲取滾動(dòng)條的值的相關(guān)知識(shí),代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2018-07-07
  • 微信小程序?qū)崿F(xiàn)導(dǎo)航欄選項(xiàng)卡效果

    微信小程序?qū)崿F(xiàn)導(dǎo)航欄選項(xiàng)卡效果

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)導(dǎo)航欄選項(xiàng)卡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-02-02

最新評(píng)論