Vue登錄驗證碼

Vue登錄驗證碼

最近在開發PC端Vue項目，配合element-ui使用，這裏分享下在登錄頁面登錄驗證碼邏輯，言歸正傳。

1.效果圖如 :

2.邏輯分析：

點擊登錄,首先判斷驗當前input框和生成的證碼是否正確，如果正確發送請求，如果錯誤，提醒用戶不在繼續執行。

3.代碼如下：

核心代碼

createCode() {
		const 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() {
		const 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);
        });
     }

希望能幫到你！