vue--获取手机短信验证码

左手牵♪♡右手

已于 2022-01-25 11:21:12 修改

阅读量1.9k

点赞数 1

文章标签：前端

于 2022-01-20 15:59:44 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45102212/article/details/122603602

版权

本文介绍了在Vue项目中如何实现获取手机短信验证码的功能。包括初始化倒计时、页面展示及后台接口调用的详细步骤。

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

1、初始化秒：

	return {
        //初始值
        show: 'false',
        count: '',
        }

2、页面中：

<el-form-item prop="code" label="短信验证码">
        <el-input v-model.trim="form.code" style="width:60%" maxlength="6"
        oninput="value=value.replace(/[^\d]/g,'')" placeholder="请填写短信验证码"></el-input>
        <el-button type="text" class="code" v-show="show" @click.prevent="getCode()" >获取验证码</el-button> 
        <el-button type="text" class="code" v-show="!show">{
  {count}}s后重试</el-button> 
</el-form-item>

接口调用：

      // 获取短信验证码
      getCode() {
        if(this.validatePhone()){
          this.vaTime()
          let params={phone:this.

最低0.47元/天解锁文章