iview短信验证码登录

最新推荐文章于 2022-05-23 10:19:03 发布

今天没bug

最新推荐文章于 2022-05-23 10:19:03 发布

阅读量404

点赞数

文章标签：前端 vue

本文链接：https://blog.csdn.net/weixin_44492855/article/details/124686170

版权

这篇博客展示了如何在前端实现一个登录表单，包括手机号和验证码输入，使用Vue.js进行表单验证和监听键盘事件。当用户点击获取验证码按钮，会触发发送短信验证码的API，并显示倒计时。登录按钮点击后，验证表单并调用登录接口，成功则跳转，失败则显示错误提示。

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

html

   <Form ref="loginForm"
                :model="form"
                :rules="rules"
                @keydown.enter.native="handleSubmit">
            <FormItem prop="phone">
              <Input v-model="form.phone" placeholder="请输入手机号">
              <span slot="prepend">
                      <Icon type="md-tablet-portrait" :size="14" />
              </span>
              </Input>
            </FormItem>
            <FormItem prop="code">
              <div style="display: flex;align-items: center;">
                <Input type="text" style="width:220px" v-model="form.code"placeholder="请输入验证码">
                <span slot="prepend">
                    <Icon type="md-mail" :size="14" />
                </span>
                </Input>
                <Button style="height:32px;margin-left:10px" :disabled="!!cooling"
                        @click="getCaptcha"> 
{{ cooling ? "重新发送(" + cooling + ")" : "获取验证码" }}
</Button>
              </div>
              <!-- <Input type="code" v-model="form.code" placeholder="请输入验证码">
                <span slot="prepend">
                  <Icon :size="14" type="md-lock"></Icon>
                </span>
              </Input> -->
            </FormItem>
            <div style="text-align:right;"><a @click="goForgetPwd">忘记密码？</a></div>

            <FormItem>
              <Button @click="handleSubmit"
                      type="primary"
                      long>登录</Button>
            </FormItem>

          </Form>

methods

 getCaptcha () {
      const phone = this.form.phone.trim()
      // 获取验证码
      sendSms({ phone }).then((res) => {
        res = res.data
        if (res.code == 0) {
          this.cooling = 60
          let coolingInter = setInterval(() => {
            if (this.cooling > 0) {
              this.cooling--
            } else {
              clearInterval(coolingInter)
            }
          }, 1000)
          const xPhone = phone.slice(0, 3) + 'xxxx' + phone.slice(7)
          this.$Notice.success({
            title: '验证码',
            desc: `验证码已发送至${xPhone}`,
            duration: 5
          })
        } else {
          this.$Notice.error({ desc: res.message })
        }
      })
    },
    handleSubmit () {
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          let data = await this.handleLoginSms(this.form)
          if (data.code == 0) {
            // success
            let res = await this.getUserInfo()
            this.$store.dispatch('store_showKaptcha', null)
            await this.handleArea() // get area
            this.$router.push({ name: this.$config.homeName })
          } else {
            this.errNum++
            this.$Message.error(data.message)
            if (this.errNum === 3) {
              this.$store.dispatch('store_showKaptcha', 1)
            }
            this.errorTime++
            this.form.username = ''
            this.form.password = ''
            this.form.code = ''
            this.initVcode()
          }
        }
      })
    }