使用JS生成验证码【简易版】

在登录页面，一个四位数的随机数字和字母组合字符串作为验证码。一个是用户输入验证码，一个是系统随机生成验证码，如果两个验证码相同，则验证成功，否则验证失败。

<el-input type="text" v-model="enterCode" @blur="checkNum">
  <el-button slot="prepend" icon="el-icon-key"></el-button>
</el-input>
<el-button @click="createCode" style="width: 120px;">{{ getCode }}</el-button>

如何获取随机验证码呢？

createCode(){
  var code = "";
  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++) {
    //循环操作
    var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）
    code += random[index];//根据索引取得随机数加到code上
  }
  this.getCode = code;//把code值赋给验证码
},

验证验证码是否正确？

checkNum(){
  var num = this.enterCode.toUpperCase();//输入内容全部转化为大写
  if(num == this.getCode){
    this.ccc = "验证码正确";
  }else{
    this.ccc = "验证码错误";
    this.createCode();
  }
},

详细参考：案例演示地址

更多 【图片验证码】案例：验证码功能【升级版】