Vue实现验证码倒计时按钮

最新推荐文章于 2023-09-30 13:37:52 发布

莫亓

最新推荐文章于 2023-09-30 13:37:52 发布

阅读量1.2k

点赞数

分类专栏： Vue网站局部实现文章标签：验证码倒计时 Vue 按钮

本文链接：https://blog.csdn.net/Bule_daze/article/details/98205784

版权

该博客详细介绍了如何在Vue中实现验证码倒计时按钮的逻辑。当邮箱输入正确后，点击按钮会变为不可点击状态并启动120秒倒计时；如果邮箱输入错误，将显示错误提示。倒计时结束后，按钮恢复原状。

摘要由CSDN通过智能技术生成

描述：

点击发送验证码”按钮后进行逻辑判断：
▶️ 如果邮箱已输入且格式正确：按钮变为“已发送”，此时为不可点击状态 并开始120s倒计时；
▶️ 如果邮箱未输入或格式不正确：显示错误的提示信息。
120s倒计时结束后按钮变为“重新发送验证码”。

html:

<div v-bind:class="{ 'text_email': isActive, 'text_tip': isTip }">{
  {tip}}</div> //出错提示
<div class="input">
    <i class="ret_icon-email"></i>
    <input 
      type="text" 
      v-model="email" 
      v-bind:class="{ 'input_email0' : hasError }" 
      v-on:click="cancelError" 
      :placeholder="输入邮箱地址" 
      id="inputEmail"
    />
    <br />
    <input type="text" placeholder="输入验证码" class="i