前端登录页面验证码

 

 首先，在el-form-item里有两个div，各占一半，左边填验证码，右边生成验证码

 <el-form-item prop="code"><div style="display: flex " prop="code"><el-input placeholder="请输入验证码" prefix-icon="el-icon-circle-check" size="medium" style="flex: 1 " v-model="user.code"></el-input><div style="flex: 1; height: 36px"><!-- 使用自定义组件 validCcode，并监听其 'update:value' 事件 --><valid-code @update:value="getCode"></valid-code></div></div></el-form-item>

 在data()里（不在return里面）整个 validateCode 函数用于处理验证码输入的验证逻辑，确保用户输入了正确的验证码。如果输入为空或输入错误，都会通过回调函数返回相应的错误信息，从而提供用户友好的反馈。

const validateCode = (rule, value, callback) => {// 检查用户输入的验证码 value 是否为空if (value === '') {// 如果验证码为空，则通过 callback 返回一个错误对象，提示用户需要输入验证码callback(new Error('请输入验证码'));// 如果用户输入的验证码（不区分大小写）与预期的验证码（this.code）不一致} else if (value.toLowerCase() !== this.code) {// 提示用户输入的验证码错误callback(new Error('验证码错误'));// 如果验证码输入正确} else {// 调用 callback 不带参数，表示验证成功callback();}
}

methods里忽略大小写

getCode(code){this.code = code.toLowerCase()},

新建一个ValidCode文件，ValidCode代码cv就可以

<template><div class="ValidCode disabled-select" style="width: 100%; height: 100%" @click="refreshCode"><span v-for="(item, index) in codeList" :key="index" :style="getStyle(item)">{{item.code}}</span></div></template><script>export default {name: 'validCode',data () {return {length: 4,codeList: []}},mounted () {this.createdCode()},methods: {refreshCode () {this.createdCode()},createdCode () {let len = this.length,codeList = [],chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789',charsLen = 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.push({code: chars.charAt(Math.floor(Math.random() * charsLen)),color: `rgb(${rgb})`,padding: `${[Math.floor(Math.random() * 10)]}px`,transform: `rotate(${Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)}deg)`})}// 指向this.codeList = codeList// 将当前数据派发出去this.$emit('update:value', codeList.map(item => item.code).join(''))},getStyle (data) {return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`}}}</script><style>.ValidCode{display: flex;justify-content: center;align-items: center;cursor: pointer;}.ValidCode span {display: inline-block;font-size: 18px;}</style>