vue 实现验证码、刷新以及校验验证码输入是否准确

1.引入Sidentify.vue文件在工程中

2.在当前  .vue文件中引入  

import SIdentify from './Sidentify'  //**引入验证码组件**

components: {
    SIdentify
},

3. 引入组件

  
    
      

        
      
    
    
      

        
      
    
    
      

        
      
      

        
      
    
    
      登录
    
  

4. 完整代码

export default {
    data() {
        var login = (rule, value, callback) => {
            var regUserName = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
            if (value === '') {
                callback(new Error('请输入邮箱'));
            } else if (!regUserName.test(value)) {
                callback(new Error('邮箱格式错误，请重新输入'));
            } else {
                callback();
            }
        };
        var password = (rule, value, callback) => {
            var regUserName = /.{6,18}/;
            if (value === '') {
                callback(new Error('请输入密码'));
            } else if (!regUserName.test(value)) {
                callback(new Error('密码格式错误，请输入6-18任意字符'));
            } else {
                callback();
            }
        };
        const sidentify = (rule, value, callback) => {
            let newVal = value.toLowerCase()
            let identifyStr = this.identifyCode.toLowerCase()
            if (newVal === '') {
                callback(new Error('请输入验证码'))
            } else if (newVal !== identifyStr) {
                console.log('validateVerifycode:', value)
                callback(new Error('验证码不正确'))
            } else {
                callback()
            }
        };
        return {
            identifyCodes: '1234567890ABCDEFGHIGKLMNoPQRSTUVWXYZ',
            identifyCode: '', //验证码
            //弹出框是否显示(登录)
            dialogVisible: false,
            loginForm: {login: '', password: '', sidentify: '',},
            rules: {
                login: [{validator: login, trigger: 'blur'}],
                password: [{validator: password, trigger: 'blur'}],
                sidentify: [{validator: sidentify, trigger: 'blur'}]
            }, 
    },
    components: {
        SIdentify
    },
    //生命周期（页面起初加载的）
    mounted() {
        // 验证码初始化
        this.identifyCode = ''
        this.makeCode(this.identifyCodes, 4)
    },
    //进行数据交互的方法
    methods: {
        publicDialog(type) {
           this.dialogVisible = true;
        },
        // 生成随机数
        randomNum(min, max) {
            return Math.floor(Math.random() * (max - min) + min)
        },
        // 生成四位随机验证码
        makeCode(o, l) {
            for (let i = 0; i < l; i++) {
                this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)]
            }
            console.log(this.identifyCode)
        },
        // 切换验证码
        refreshCode() {
            this.identifyCode = ''
            this.makeCode(this.identifyCodes, 4)
        },
        //绑定回车事件
        enterSubmit(ev) {
            var keyCode = ev.keyCode || ev.which;
            if (keyCode == 13) {
                this.ValidForm();
            }
        },
        ValidForm(loginType) {
                this.$refs['loginForm'].validate((valid) => {
                    if (valid) {
                        this.login();
                    }
                });
          
        },
        login() {}, 
    }
}

 

 

 

总结：以上是我在开发中动态获取验证码方法，有什么更好的方法欢迎留言交流，共同进步