Vue登录验证码

Vue登录验证码

最近在开发PC端Vue项目，配合element-ui使用，这里分享下在登录页面登录验证码逻辑，言归正传。

1.效果图如 :

2.逻辑分析：

点击登录,首先判断验当前input框和生成的证码是否正确，如果正确发送请求，如果错误，提醒用户不在继续执行。

3.代码如下：

核心代码

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

html 代码

<template>
  <div class="login">
    <el-form ref="form":model="form":rules="rules" class="form">
      <el-form-item prop="username">
        <el-input
          class="log-input"
          v-model="form.username"
          placeholder="用户名"
          prefix-icon="icon-login_user">
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          class="log-input"
          v-model="form.password"
          placeholder="密码"
          type="password"
          prefix-icon="icon-login_pwd"
        >
        </el-input>
      </el-form-item>
      <el-form-item
        prop="seccode"
        class="inputbar"
      >
        <el-input
          class="log-input"
          v-model="form.seccode"
          placeholder="验证码"
          prefix-icon="icon-login_auth"
          @keydown.enter.native="login('form')"
        >
        </el-input>
        <span class="checkCode" @click="createCode">{{ checkCode}}</span>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          class="btn"
          @click="login('form')"
        >登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

js 代码

export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
        seccode:""
      },
      checkCode:'',
      rules: {
        username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
        seccode: [{ required: true, message: "请输验证码", trigger: "blur" }]
      },  
    };
  },
 mounted () {
    this.createCode();
  },
  methods: {
   createCode() {
		let code = "";
		const codeLength = 4; //验证码的长度  
		const 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(let i = 0; i < codeLength; i++) { //循环操作  
			let index = Math.floor(Math.random() * 36); //取得随机数的索引（0~35）  
			code += random[index]; //根据索引取得随机数加到code上  
		}
		this.checkCode = code; //把code值赋给验证码  
	},
	login() {
      if(this.form.seccode != this.checkCode) {
         this.$message({
              message: "验证码错误，注意大写字母",
              type: "warning"
        });
        this.createCode();
        return false;
      };
      var fd = new FormData();
      fd.append("username", this.form.username);
      fd.append("password", this.form.password);
      loginPost(fd).then(res => {
          console.log(res);
          if (res.code == 200) {
            localStorage.setItem("myToken", res.obj.token);
            localStorage.setItem("username", res.obj.userName);
            this.$message({
              message: "登录成功",
              type: "success"
            });
            this.$router.push("/");
            // this.setUserName(res.obj.userName);
          } else {
            this.$message({
              message: res.content,
              type: "warning"
            });
          }
        })
        .catch(res => {
          console.log(res);
        });
     }

希望能帮到你！