vue获取验证码以及倒计时60秒方法

本文详细介绍了一种使用手机验证码进行身份验证的登录方法。通过Vant UI组件库搭建界面,包括手机号输入框、验证码按钮和登录按钮。代码展示了如何在前端进行手机号格式验证,发送验证码并启动倒计时,以及如何调用后端接口完成登录过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

完整的获取验证码方法,上干货。

<template>
    <div class="login-content">
      <van-cell-group>
        <van-field label="手机号" type="tel" v-model="phone" :error="phoneError && !phone" maxlength="11" placeholder="请输入手机号" />
        <van-field
          v-model="verifycode"
          center
          clearable
          label="验证码"
          placeholder="请输入验证码">
          <van-button slot="button" size="small" type="primary" @click="sendVerifycode()" :disabled="!disabledCodeBtn">{{codeText}}</van-button>
        </van-field>
      </van-cell-group>
      <div class="btn padding">
        <van-button type="primary" size="large" @click="login()">验证身份</van-button>
      </div>
    </div>
</template>

// 以上是 vant-ui
<script>
  import {Field, CellGroup, Button, Toast} from 'vant'
  import api from 'api/api_lib'  // api换成自己的

  export default {
    name: 'login',
    data () {
      return {
        phone: '',
        verifycode: '',
        codeText:'获取',
        disabledCodeBtn: true
      }
    },
    components: {
      [Field.name]: Field,
      [CellGroup.name]: CellGroup,
      [Button.name]: Button,
      [Toast.name]: Toast
    },
    methods: {
    // 向后台要验证码方法
      async sendVerifycode(){
        if(this.verifyPhone()){
          Toast(this.verifyPhone())
        } else {
          let res = await api.pp.sms.getVerifyCode(this.phone)
          //  用手机号向后台换取验证码,发送成功则开始调用倒计时分方法
          if(res){
            this.countDown(60)
          }
        }
      },
      // 表单校验方法
      verifyPhone(){
        if(!this.phone){
          return '请输入手机号'
        } else if(this.phone.length !== 11){
          return '请输入11位手机号'
        } else {
          return false
        }
      },
  	// 倒计时方法
      countDown (time) {
        if (time === 0) {
          this.disabledCodeBtn = true
          this.codeText = "获取"
          return
        } else {
          this.disabledCodeBtn = false;
          this.codeText = '重新发送(' + time + ')'
          time--
        }
        setTimeout(()=> {
          this.countDown(time)
        }, 1000)
      },
      // 登录
      login(){
        if(this.verifyPhone()){
          Toast(this.verifyPhone())
        } else {
          let params = {
            phone: this.phone,
            code: this.verifycode
          }
          // 这里写登录的接口
        }
      }
    },
  }
</script>

<style scoped>
.login-content{
  padding-top: 35%;
}
  .padding{
    padding: 40px 15px;
  }
</style>

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值