SpringBoot集成邮箱服务（四）-----------邮箱验证用法（前端）_springboot项目登录页面增加邮箱验证码校验

如果喜欢我的编程笔记可以关注我的微信公众号【Java掌上手册】，上面有我不定期的项目面试题分享哦~（关注公众号回复面试宝典便可获得史上最全的后端面试题资料哦！）

1.在template中创建输入框和发送按钮还有接收验证码的输入框

<el-form-item prop="email">
  <div style="display: flex;">
    <el-input v-model="form.email" style="flex: 1" placeholder="请输入邮箱" :prefix-icon="Message"></el-input>
    <el-button style="width: 100px;margin-left: 5px" @click="sendEmail">点击发送</el-button>
  </div>
</el-form-item>
<el-form-item >
    <el-input  placeholder="请输入收到的邮箱验证码" :prefix-icon="EditPen" v-model="form.code"></el-input>
</el-form-item>
1
2
3
4
5
6
7
8
9

1.设置邮箱校验规则
邮箱校验的正则表达式为：/^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/

const reg = /^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/
  const checkEmail = (rule,value,callback) => {

  if (!reg.test(value)){ //test可以校验你的输入值
  return callback(new Error('邮箱格式不合法'))
  }
  callback()
  }
1
2
3
4
5
6
7
8

const rules = reactive({
  email: [
  {validator: checkEmail, trigger: 'blur'},
  ]
  })
1
2
3
4
5

2.编写axios请求

const sendEmail = () => {
  if (!reg.test(form.email)){ //test可以校验你的输入值
  ElMessage.warning("请输入合法的邮箱")
  return
  }
  request.get("/email", {
  params: {
  email: form.email,
  type: "REGISTER"
  }
  }).then(res=>{
  if (res.code === '200'){
  ElMessage.success('验证码发送成功，有效期5分钟')
  }else {
  ElMessage.error(res.msg)
  }
  })
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3.优化（定时器）：
a.按钮绑定定时器（在点击发送按钮的一段时间之内不可以重复点击此发送按钮）

<el-form-item prop="email">
  <div style="display: flex;">
    <el-input v-model="form.email" style="flex: 1" placeholder="请输入邮箱" :prefix-icon="Message"></el-input>
    <el-button style="width: 100px;margin-left: 5px" @click="sendEmail" :disabled="time > 0">点击发送<span v-if="time">({{ time }})</span></el-button>
  </div>
</el-form-item>

<!--点击发送 <span v-if="time">({{ time }})</span> -->
1
2
3
4
5
6
7
8

b.在script中定义time和interval

<script setup>
  const time = ref(0)
  const interval = ref(-1)
</script>
1
2
3
4

c.定义开始time的值为10，利用时间间隔定时器每过一秒-1，并将值赋值给interval，在执行时间间隔定时器之前首先判断interval的值是否大于等于0，如果满足的话，则将interval的值清空

const sendEmail = () => {
  //清空定时器
  if (interval.value >= 0){
    clearInterval(interval.value)
  }
    time.value = 10
    interval.value = setInterval(() => {
      if (time.value > 0){
        time.value --
      }
    },1000)
    }
1
2
3
4
5
6
7
8
9
10
11
12

d.最后在发送按钮的el-button中绑定:disabled=“time > 0”