vue前端实现登录页面的验证码(新手版)

一、搭建vue前端登录页面

<template>
  <div style="width: 800px; margin: 5px auto; background-color: #17ecf3">
    <div align="center">
      <h2>用户登录</h2>
    </div>
    <div style="width: 60%; margin: 1px auto">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名称：" prop="userName">
          <el-input v-model="ruleForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input v-model="ruleForm.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="验证码：" prop="code" align="left">
          <el-input v-model="ruleForm.code" style="width: 150px"></el-input>
          <el-tag type="danger" style="font-size: 20px">{{ cCode }}</el-tag>
          <el-link type="primary" @click="getCode">换一张</el-link>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="userLogin('ruleForm')"
            >登录</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

二、定义文本框输入验证码变量及生成验证码变量

data() {
    return {
      cCode: "",
      ruleForm: {
        userName: "",
        password: "",
        code: "",
      },
    };
  },

三、在method中写出生成验证码的方法

getCode() {
      this.cCode = "";
      let codeString =
        "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
      let codeArray = codeString.split("");
      let num = codeArray.length;
      let newCodeArray = [];
      for (let i = 0; i < 4; i++) {
        let index = Math.floor(Math.random() * num);
        newCodeArray.push(codeArray[index]);
      }
      this.cCode = newCodeArray.join("");
    },

四、钩子函数createed中执行上述方法

created() {
    this.getCode();
  },

五、更换验证码只需加入超链接控件，调用此方法即可

<el-link type="primary" @click="getCode">换一张</el-link>