vue登录验证码组件，前端验证

效果图

点击可以切换验证码

 

自定义组件 

使用组件

1、组件注册

 2、组件使用

页面引入

data

       // 验证码
       identifyCodes: '1234567890abcdefjhijklinopqrsduvwxyz',//随机串内容
       identifyCode: '',
       // 校验
       rules: {
            code: [{ required: true, message: "请输入验证码", trigger: "blur" }]
        },

methods 

		// 重置验证码
        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)
        },

mounted 生命周期钩子函数

mounted(){
        this.identifyCode = ''
        this.makeCode(this.identifyCodes, 4)
}