vue 实现获取验证码时间递减功能

男娘i 2022-05-20 00:55 317阅读 0赞

vue 实现获取验证码时间递减功能

  1. 关于获取验证码时间递减的情况，最常用的是出现在注册界面，当我们点击获取验证码之后，然后时间通常为60s递减，那么vue是怎么实现的呢？首先看一下效果图。获取验证码接口就自己去琢磨了哈

70 70 1

vue如下：

  1. <template>
  2. <transition name="bounce"
  3.   enter-active-class="bounceInLeft"
  4.   leave-active-class="bounceOutRight">
  5.   <div class="bg" v-loading="loading" :style="{backgroundImage:`url(${backImgUrl})`}">
  6.     <div class="login">
  7.       <div class="left">
  8.         <div class="loginTitle">
  9.           <h3>用户注册</h3>
  10.         </div>
  11.         <el-form :model="loginForm" :rules="rules" ref="loginForm" style="margin-top: 40px;">
  12.           <el-form-item prop="phone">
  13.             <el-input v-model="loginForm.phone" placeholder="请输入手机号"></el-input>
  14.           </el-form-item>
  15.           <el-form-item prop="password">
  16.             <el-input v-model="loginForm.password" placeholder="请输入密码" type="password" :maxlength="16" :minlength="6"></el-input>
  17.           </el-form-item>
  18.           <el-form-item prop="password">
  19.             <el-input v-model="loginForm.repassword" placeholder="再次请输入密码" type="password" :maxlength="16" :minlength="6"></el-input>
  20.           </el-form-item>
  21.           <!-- <el-form-item class="modifyVerification">
  22.             <div class="verificationCode">
  23.               <el-input v-model="loginForm.password" placeholder="请输入验证码"></el-input>
  24.               <div class="verficationImage"></div>
  25.             </div>
  26.           </el-form-item> -->
  27.            <el-form-item class="phoneVerification">
  28.             <div class="phoneVerificationCode">
  29.               <el-input v-model="loginForm.validateCode" placeholder="请输入收到的验证码"></el-input>
  30.               <div class="phoneVerficationImage" @click="getValidate()">{
  31.     {validateName}}</div>
  32.             </div>
  33.           </el-form-item>
  34.           <div class="agreeText">
  35.               <div>
  36.                 <el-checkbox v-model="checked">同意<span>注册协议</span>
  37.                 </el-checkbox>
  38.               </div>
  39.               <div>
  40.                 <a @click="goToLogin()"><span>已有账号登录</span></a>
  41.               </div>
  42.           </div>
  43.           <el-form-item>
  44.             <el-button type="primary" style="width: 100%; margin: 30px 0" @click="submitForm()">立即注册</el-button>
  45.           </el-form-item>
  46.         </el-form>
  47.       </div>
  48.       <div class="right">
  49.         <img :src="imgCode"/>
  50.         <p>扫一扫<br>下载嗨黔东南</p>
  51.       </div>
  52.     </div>
  53.   </div>
  54. </transition>
  55. </template>
  57. <script>
  58. import imgCode from 'assets/images/code.jpg'
  59. import backImgUrl from 'assets/images/landr/login-bg.jpg'
  61. let countDown = 60
  62. export default {
  63.   data () {
  64.     return {
  65.       validateName: '获取验证码',
  66.       checked: false,
  67.       backImgUrl,
  68.       imgCode,
  69.       loading: false,
  70.       loginForm: {
  71.         phone: '',
  72.         password: '',
  73.         repassword: '',
  74.         validateCode: ''
  75.       },
  76.       rules: {
  77.         phone: [
  78.           { required: true, message: '请输入手机号', trigger: 'blur' },
  79.           { pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  80.         ],
  81.         password: [
  82.           { required: true, message: '请输入密码', trigger: 'blur' },
  83.           { pattern: /^[0-9a-zA-Z]{6,16}$/, message: '密码6~16位由字母、数字、下划线组成', trigger: 'blur' }
  84.         ],
  85.         repassword: [
  86.           { required: true, message: '请输入密码', trigger: 'blur' },
  87.           { pattern: /^[0-9a-zA-Z]{6,16}$/, message: '密码6~16位由字母、数字、下划线组成', trigger: 'blur' }
  88.         ]
  89.       }
  90.     }
  91.   },
  92.   created() {
  93.     document.title = '登录-嗨黔东南'
  94.   },
  95.   methods: {
  96.     submitForm () {
  97.       const _self = this
  98.       if (this.loginForm.password !== this.loginForm.repassword) {
  99.         _self.$message({
  100.           showClose: true,
  101.           message: '两次输入的密码不一致',
  102.           type: 'error'
  103.         })
  104.         return
  105.       } else if (this.loginForm.validateCode === '' || this.loginForm.validateCode === null) {
  106.         _self.$message({
  107.           showClose: true,
  108.           message: '未验证手机验证码',
  109.           type: 'error'
  110.         })
  111.         return
  112.       }
  113.       this.$refs.loginForm.validate((valid) => {
  114.         if (valid) {
  115.           _self.loading = true
  116.           _self.$http.post(`/v1/sms/${_self.loginForm.phone}/${_self.loginForm.validateCode}`, null).then(data => {
  117.             _self.loading = false
  118.             _self.$http.post('/v1/phoneRegister', {phone: _self.loginForm.phone, password: _self.loginForm.password}).then(data => {
  119.               this.$store.commit('setUserInfo', data)
  120.               _self.loading = false
  121.               _self.$message({
  122.                 showClose: true,
  123.                 message: '注册成功',
  124.                 type: 'sucess'
  125.               })
  126.               _self.$router.push('/login')
  127.             }).catch(errMsg => {
  128.               _self.loading = false
  129.               _self.$message({
  130.                 showClose: true,
  131.                 message: errMsg,
  132.                 type: 'error'
  133.               })
  134.             })
  135.           }).catch(errMsg => {
  136.             _self.loading = false
  137.             _self.$message({
  138.               showClose: true,
  139.               message: errMsg,
  140.               type: 'error'
  141.             })
  142.           })
  143.         }
  144.       })
  145.     },
  146.     goToLogin () {
  147.       this.$router.push('/login')
  148.     },
  149.     // 手机验证码定时器
  150.     setTimeDown () {
  151.       if (countDown === 0) {
  152.         this.validateDisabled = false
  153.         this.validateName = '重新获取'
  154.         countDown = 60
  155.         return
  156.       } else {
  157.         this.validateDisabled = true
  158.         this.validateName = countDown + 's'
  159.         countDown--
  160.       }
  161.       const _self = this
  162.       this.timer = setTimeout(() => {
  163.         _self.setTimeDown()
  164.       }, 1000)
  165.     },
  166.     getValidate () {
  167.       if (this.validateDisabled) {
  168.         return
  169.       }
  170.       if (this.loginForm.phone === null || this.loginForm.phone === '') {
  171.         const _self = this
  172.         _self.$message({
  173.           showClose: true,
  174.           message: '手机号不能为空',
  175.           type: 'error'
  176.         })
  177.         return
  178.       }
  179.       if (countDown >= 60) {
  180.         const _self = this
  181.         this.$http.get(`/v1/sms/` + this.loginForm.phone, null).then(data => {
  182.           _self.$message({
  183.             showClose: true,
  184.             message: '发送验证码成功',
  185.             type: 'sucess'
  186.           })
  187.         }).catch(errMsg => {
  188.           _self.$message({
  189.             showClose: true,
  190.             message: errMsg,
  191.             type: 'error'
  192.           })
  193.         })
  194.       }
  195.       this.setTimeDown()
  196.     }
  197.   }
  198. }
  199. </script>
  201. <style lang="stylus" scoped>
  202. @import '~@/assets/css/variable.styl'
  203. .bg
  204.   position fixed
  205.   top 0
  206.   left 0
  207.   right 0
  208.   bottom 0
  209.   width 100%
  210.   height 100%
  211.   background-repeat: no-repeat;
  212.   background-size: cover;
  213.   background-position 50% 50%;
  214.   z-index 500
  215. .login
  216.   padding 18px
  217.   background #ffffff
  218.   border-radius 5px
  219.   position absolute
  220.   top 50%
  221.   left 50%
  222.   transform translate(-50%, -50%)
  223.   display flex
  224.   .forget
  225.     text-align right
  226.     margin-top -21px
  227.     cursor pointer
  228.     color $color-theme
  229.     &:hover
  230.       text-decoration underline
  231. .left
  232.   width 300px
  233.   padding 12px
  234.   padding-right 24px
  235.   .loginTitle
  236.     left 0px
  237.     top 0px
  238.     position fixed
  239.     width 100%
  240.     line-height 50px
  241.     height 50px
  242.     background-color #58D0FF
  243.     text-align center
  244.     color white
  245.     font-size 18px
  246. .right
  247.   padding 70px 10px 0 20px
  248.   border-left 1px solid $color-border
  249.   text-align center
  250.   img
  251.     width 180px
  252.     height 180px
  253.   p
  254.     font-size 15px
  255.     color #797979
  256.     line-height 24px
  257.     margin-top 30px
  258.     text-align center
  259.     width 180px
  260.     line-height 1.8
  261.     letter-spacing 4px
  262. .divider
  263.   display flex
  264.   justify-content space-between
  265.   align-items center
  266.   white-space nowrap
  267.   height auto
  268.   overflow hidden
  269.   line-height 1
  270.   text-align center
  271.   padding 10px 0
  272.   color #666
  273.   margin-top 24px
  274.   &:before
  275.   &:after
  276.     content ''
  277.     display block
  278.     position relative
  279.     width 100px
  280.     height 1px
  281.     background $color-border
  282. .third-login
  283.   display flex
  284.   justify-content space-around
  285.   text-align center
  286.   margin-top 15px
  287.   i
  288.     font-size 48px
  289.     color $color-theme
  290.   p
  291.     color #666
  293. .modifyVerification {
  294.   .verificationCode {
  295.     display flex
  296.     .verficationImage {
  297.       background-color #79c757
  298.       width 55%
  299.       height 40px
  300.       margin-left 10px
  301.     }
  302.   }
  303. }
  304. .phoneVerification {
  305.   .phoneVerificationCode {
  306.     display flex
  307.     .phoneVerficationImage {
  308.       cursor pointer
  309.       background-color #ffad4d
  310.       width 55%
  311.       height 40px
  312.       margin-left 10px
  313.       color white
  314.       text-align center
  315.     }
  316.   }
  317. }
  318. .agreeText {
  319.   display flex
  320.   justify-content space-between
  321. }
  323. a {
  324.   text-decoration none
  325.   color black
  326. }
  327. </style>

定时主要关注getValidate()和setTimeDown()方法即可，欢迎留言，项目要上线来不及时间解释。

使用的是elementUi 组件，需要引入，注重上面两个方法即可

发表评论

表情：
评论列表 （有 0 条评论，317人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue实现验证码

    在Web应用程序中，为了避免机器自动化或恶意攻击，很常见的做法是要求用户在表单提交之前输入验证码。验证码最常见的形式是图片验证码，因为图片验证码最大程度地防止了自动化机器调用A

    短命女短命女/ 0 赞/ 76 阅读