vue登录页面设置验证码input框的方法 vue登录页面设置验证码input框的

本文实例为大家分享了vue登录页面设置验证码input框的具体代码，供大家参考，具体内容如下
【vue登录页面设置验证码input框的方法】1、效果

文章图片

2、代码
第一步：建立子组件（举例，文件名可自己取）----代码如下

文章图片

子组件 SIdentify 的完整代码：

.s-canvas {height: 38px; }.s-canvas canvas {margin-top: 1px; margin-left: 8px; }

第二步：在父组件中导入并注册子组件

import SIdentify from '../SIdentify'export default {components:{SIdentify},data(){return{code:'',inputCode:'',}},}

第三步：在登录表单上加上验证码的样式

第四步：父组件中随机生成一串字符串-------数字+字母

mounted(){this.createCode()},methods:{createCode() {var text = ""; var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; // 设置验证码长度，for( var i=0; i < 4; i++ ){text += possible.charAt(Math.floor(Math.random() * possible.length)); }this.code = text},}

第五步：在点击登录按钮后的方法中判断验证码部分（加 .toLowerCace() 是为了不区分大小写）

if(this.inputCode == ''){this.$message.error('请输入验证码')return}if(this.inputCode.toLowerCase() != this.code.toLowerCase()){this.$message.error('验证码错误')this.inputCode = ''this.createCode()return}

具体位置如下：