vue+Element实现登录随机验证码

本文实例为大家分享了vue+Element实现登录随机验证码的具体代码，供大家参考，具体内容如下

验证码验证只是前端，无需后台交互

首先，创建一个identify.vue页面，用于写各种：随机数字/字母，随机颜色，干扰点/线

identify.vue

然后就是在你需要的页面

html代码只是简单的输入行，图片，加验证码替换
@keyup.enter.native="submitForm()是我登录时摁下Enter直接登录的方法可有可无，自己选择

     
     
    
    
     

      

       
      
      看不清，换一张
     

然后就是script
首先引入SIdentify

import SIdentify from '../../components/page/identify.vue'

下面各种方法，验证及规则就直接写完了

export default {
    data: function() {
    /* 自定义验证码规则 */
   const validateVerifycode = (rule, value, callback) => {
    if (value === '') {
     callback(new Error('请输入验证码'))
    } else if (value !== this.identifyCode) {
     console.log('validateVerifycode:', value);
     callback(new Error('验证码不正确!'))
    } else {
     callback()
    }
   }
    return {
        identifyCodes: '1234567890abcdefghijklmnopqrstuvwxyz',
          identifyCode: '',
          rules:{
          verifycode: [{
      required: true,
      trigger: 'blur',
      validator: validateVerifycode,
     }]
            }
        };
    },
    components:{
    SIdentify
    },
    mounted(){
    this.identifyCode='';
    this.makeCode(this.identifyCodes,4);
    disableBrowserBack();
     history.pushState(null, null, document.URL);
      if (window.history && window.history.pushState) {
            $(window).on('popstate', function (){
                window.history.pushState('forward', null, '');
                window.history.forward(1);
           });
            window.history.pushState('forward', null, '');  //在IE中必须得有这两行
       window.history.forward(1);
    },
    methods:{
    randomNum(min, max) {
    return Math.floor(Math.random() * (max - min) + min)
   },
   // 切换验证码   
   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)]
    }
    console.log(this.identifyCode)
    /* alert(this.identifyCode) */
   }
    }
}

到这就已经完成了，还可以添加css样式完美一下

 .identifybox {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
 }

验证码分享就这么多了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。