【短信验证码登录】

短信验证码登录

1.页面如下

html如下

 <el-form-item  label="手机号"  prop="phone">
    <div class="phone-box">
     <!--手机号码限制长度11位，输入时checkPhone判断是否为数值（不允许输入数值意外的值）  -->
     <el-input   @input="checkPhone"   v-model="contactsInfo.phone"  :maxlength="11" />
      <!--  根据setTime判断显示倒计时还是“获取验证码”  countDown：验证码倒计时-->
     <el-button   v-if="setTime"   type="primary"  size="small"   style="margin-left:10px;width: 100px;" disabled>{{countDown}}</el-button>
     <el-button  v-else  type="primary"  size="small"  style="margin-left:10px;"  @click="getCode">获取验证码</el-button>
   </div>
 </el-form-item>
 <el-form-item   label="验证码"   prop="code">
    <el-input v-model="contactsInfo.code" />
 </el-form-item>

data如下

data() {
	//验证电话号码格式是否正确
	const validatePhone = (rule, value, callback) => {
      const e = this.contactsInfo.phone.match(
        /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/
      )
      if (!e) {
        callback(new Error('请输入正确的联系方式'))
      } else {
        callback()
      }
    }
	return {
		 contactsInfo: {
	        name: '',
	        phone: '',
	        code: '',
	        key: null
	      },
	      countDown: 60,
	      setTime: false,
	      rules: {
	        name: [
	          { required: true, message: '请输入联系人名称', trigger: 'blur' }
	        ],
	        phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
	        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
	      },
	}
}

函数如下

   //验证电话号码
    checkPhone() {
      this.contactsInfo.phone = this.contactsInfo.phone.replace(/\D/g, '')
    },
   //获取验证码
    getCode() {
      const e = this.contactsInfo.phone.match( /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/  )
      if (!e) {
        this.$message.error('请输入正确的联系方式')
        return
      } else {
        this.setTime = true
        this.codeInterval = setInterval(() => {
          this.countDown--
          if (this.countDown === 0) {
            clearInterval(this.codeInterval)
            this.countDown = 60
            this.setTime = false
          }
        }, 1000)
        const data = {
          phone: this.contactsInfo.phone * 1
        }
        userApi.sendSMSCode(data).then((res) => {
          this.$message.success('验证码已成功发送到你的手机，请注意查收')
        })
      }
    },