Vue3实现登录验证码校验

登录页面添加字段

        <el-form-item prop="code" label="验证码:">
            <div style="display: flex">
              <el-input placeholder="请输入验证码" prefix-icon="el-icon-circle-check" size="default" style="flex: 1" v-model="data.form.code"></el-input>
              <div style="flex: 1; height: 36px">
                <validCode @update:value="getCode" />
              </div>
            </div>
          </el-form-item>

js

关于组件之间的数据传递参考Vue父子组件之间的数据传递-CSDN博客

  import validCode from "@/views/manager/ValidCode.vue";


  //验证码校验
const validateCode = (rule, value, callback) => {
  if (value === '') {
        callback(new Error('请输入验证码'))
      } else if (value.toLowerCase() !== data.receiveCode) {
        callback(new Error('验证码错误'))
      } else {
        callback()
      }
}
//接收子组件传递的数据
const getCode = (code) => {
  data.receiveCode = code.toLowerCase()//不区分大小写
  //console.log(data.receiveCode)
}

新建ValidCode.vue页面

<template>
  <div class="ValidCode disabled-select" style="width: 100%; height: 100%" @click="refreshCode">
    <span v-for="(item, index) in data.codeList" :key="index" :style="getStyle(item)">{{item.code}}</span>
  </div>
</template>

<script setup>
import { onMounted, reactive } from 'vue';

const data = reactive({
  length: 4,
  codeList: [],
  chars: '',//验证码生成字符串
})
const emit = defineEmits(['update:value'])
//验证码生成
const createdCode = () => {
  let len = data.length
  let codeList_tmp = []
  data.chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789'
  let charsLen = data.chars.length
  //生成
  for(let i = 0; i < len; i++){
    let rgb = [Math.round(Math.random() * 220), Math.round(Math.random() * 240), Math.round(Math.random() * 200)]
    codeList_tmp.push({
      code: data.chars.charAt(Math.floor(Math.random() * charsLen)),
      color: `rgb(${rgb.join(',')})`,
      padding: `${[Math.floor(Math.random() * 10)]}px`,
      transform: `rotate(${Math.random() * 60 - 30}deg)`, // 简化旋转角度生成
      fontSize: `${Math.random() * 10 + 18}px`, // 可选的字体大小随机化
    })
  }
  //指向
  data.codeList = codeList_tmp
  //派发数据向父组件
  emit('update:value', data.codeList.map(item => item.code).join(''))
}
//验证码刷新
const refreshCode = () => {
  createdCode()
}
const getStyle = (data) => {
  return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`
}
// 页面组件加载完成后生成验证码
onMounted(
  () => {
    createdCode()
  }
)
</script>

<style>
.ValidCode {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.ValidCode span {
  display: inline-block;
  font-size: 18px;
  user-select: none; /* 禁用文本选择 */
}
</style>