[Uni-app]生成动态验证码

目录

一、使用背景

二、完整代码示例

三、代码详解

---

一、使用背景

当我们在设计前端用户登陆界面时，除了用户账号和用户密码的校验，往往还需要简单的动态验证码验证是否为人机。例如,以下是某登录界面的图示，最下方一栏为动态验证码，当用户看不清时，可以点击验证码图片切换另一组验证码。

二、完整代码示例

<template>
  <div class="dynamic-code">
    <div class="code-container">
      <div class="code">{{ code }}</div>
    </div>
    <button @click="generateCode">看不清，换一张</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      code: '', // 存储验证码
      characters: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789', // 允许的字符
    };
  },
  methods: {
    generateRandomCode() {
      // 生成随机四位数字加大小写字母验证码
      let result = '';
      for (let i = 0; i < 4; i++) {
        const randomIndex = Math.floor(Math.random() * this.characters.length);
        result += this.characters[randomIndex];
      }
      this.code = result;
    },
    generateCode() {
      this.generateRandomCode();
    },
  },
  mounted() {
    this.generateCode(); // 组件挂载后生成验证码
  },
};
</script>

<style>
.dynamic-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.code-container {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  padding: 10px 20px;
  border: 2px solid #333;
  border-radius: 5px;
}

button {
  font-size: 18px;
  padding: 10px 20px;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>

运行结果展示

当我们点击“看不清，换一张”时，验证码内容也会随之切换

三、代码详解

首先，我们在template里写好框架。同时为button组件绑定好generateCode事件，在实际情况中，我们可以直接给验证码图片绑定该事件，但在本案中为了方便显示切换过程，故将两者分离

<template>
  <div class="dynamic-code">
    <div class="code-container">
      <div class="code">{{ code }}</div>
    </div>
    <button @click="generateCode">看不清，换一张</button>
  </div>
</template>

之后，我们在script中写好事件实现代码。在data中，我们设置characters的值为'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',即让验证码内容从大小写字母和数字中随机生成；在methods方法中，我们写下 generateRandomCode()来在characters中随机抽取四个字符并将其拼接到result中，最后把result赋值给code用来存储验证码;在generateCode()中调用刚刚写的函数，同时使用mounted挂载，事件部分便全部完成。

<script>
export default {
  data() {
    return {
      code: '', // 存储验证码
      characters: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789', // 允许的字符
    };
  },
  methods: {
    generateRandomCode() {
      // 生成随机四位数字加大小写字母验证码
      let result = '';
      for (let i = 0; i < 4; i++) {
        const randomIndex = Math.floor(Math.random() * this.characters.length);
        result += this.characters[randomIndex];
      }
      this.code = result;
    },
    generateCode() {
      this.generateRandomCode();
    },
  },
  mounted() {
    this.generateCode(); // 组件挂载后生成验证码
  },
};
</script>

最后，我们在style中写好每个组件的样式，这里可以根据需求在.code-container中调整验证码字符的样式，以让其看起来更加“难以分辨”

<style>
.dynamic-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.code-container {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  padding: 10px 20px;
  border: 2px solid #333;
  border-radius: 5px;
}

button {
  font-size: 18px;
  padding: 10px 20px;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>