vue+element 数字加字母验证码（直接复制，简单易懂）

最新推荐文章于 2024-07-09 17:15:54 发布

Apeng_0919

最新推荐文章于 2024-07-09 17:15:54 发布

阅读量1.2k

点赞数 1

分类专栏： vue element 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_50606255/article/details/116526646

版权

vue 同时被 2 个专栏收录

36 篇文章 3 订阅

订阅专栏

element

9 篇文章 0 订阅

订阅专栏

可直接复制代码！！！

<template>
  <div class="join_formitem">
    <el-form ref="form" :rules="rule" :model="form">
      <el-form-item label="验证码" prop="picLyanzhengma">
        <el-input
          type="text"
          placeholder="请输入验证码"
          v-model="form.picLyanzhengma"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="captcha">
      <input
        type="button"
        @click="createCode"
        class="verification"
        v-model="checkCode"
      />
    </div>
  </div>
</template>

给表单加上校验，可用于判断输入的验证码是否正确

data() {
    return {
      form: {
        picLyanzhengma: "",
      },
      checkCode: "",
      code: "",
      rule: {
        picLyanzhengma: [
          { require: true, message: "验证码不能为空", trigger: "blur" },
          {
            validator: this.checkNumber,
            trigger: "blur",
          },
        ],
      },
    };
  },

checkNumber(rule, value, callback) {
      if (value == "") {
        callback(new Error("验证码不能为空!"));
      } else {
        if (value != this.checkCode) {
          callback(new Error("验证码错误!请注意大小写!"));
        } else {
          callback();
        }
      }
    },

定义验证码函数，每次点击更换验证码时都要调用

createCode() {
      //先清空验证码的输入
      this.code = "";
      this.checkCode = "";
      this.picLyanzhengma = "";
      //验证码的长度
      var codeLength = 4;
      //随机数
      var random = new Array(
        0,
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z"
      );
      for (var i = 0; i < codeLength; i++) {
        //取得随机数的索引（0~35）
        var index = Math.floor(Math.random() * 36);
        //根据索引取得随机数加到code上
        this.code += random[index];
      }
      //把code值赋给验证码
      this.checkCode = this.code;
    },

最后就是简单的css排版 :

<style lang="less">
.join_formitem {
  display: flex;
  flex-direction: row;
  .el-form-item {
    display: flex;
    flex-direction: row;
  }
  .captcha {
    text-align: justify;
    .verification {
      border-radius: 12px;
      width: 100px;
      outline: none;
      letter-spacing: 5px;
      margin-left: 20px;
      height: 40px;
      transform: translateY(0px);
    }
  }
}
</style>

最后显示出来的效果就是这样