前端登录页面验证码

 

 首先，在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>

 

 

 

原文地址：https://blog.csdn.net/weixin_63128816/article/details/142669244

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！