傻瓜式教程--实现登录页面的验证码以及验证(VUE)

做成之后就是这个样子

实例图片

接下来上代码
创建一个组件。显示验证码图片

在登录页面中
验证码输输入框

登录按钮

            
                登录
            

引入之前的组件(在例子中它叫identify)

import Identify from './identify'

在登录组件中引入Identify （这是验证码组件）这一部分略
在data中

// 表单
      formLogin: {
        username: "",
        password: "",
        code: ""
      },
      identifyCodes: '1234567890abcdefjhijklinopqrsduvwxyz',
      identifyCode: '',
      // 校验
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }]
      }

在mounted中

mounted () {
    // 初始化验证码
    this.identifyCode = ''
    this.makeCode(this.identifyCodes, 4)
  },

在method中

   // 引入验证接口
 ...mapActions("d2admin/account", ["login"]),
        // 重置验证码
    refreshCode () {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    makeCode (o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)]
      }
    },
    randomNum (min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    /**
     * @description 提交表单
     */
    // 提交登录信息
    submit() {
        if (this.formLogin.code.toLowerCase() !== this.identifyCode.toLowerCase()) {
        this.$message.error('请填写正确验证码')
        this.refreshCode()
        return
      }
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          // 登录
          // 注意 这里的演示没有传验证码
          // 具体需要传递的数据请自行修改代码
          this.login({
            vm: this,
            username: this.formLogin.username,
            password: this.formLogin.password
          });
        } else {
          // 登录表单校验失败
          this.$message.error("表单校验失败");
        }
      });
    }

感谢浏览到这里，希望这篇文章对你有帮助~