使用vuejs如何实现一个验证码功能
使用vuejs如何实现一个验证码功能？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
具体如下：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
</head>
<body>
<divid="app">
<!--验证码输入框-->
<inputtype="text"v-model="aaa"@blur="checkNum"/>
<!--验证码切换按钮-->
<inputtype="button"v-model="bbb"@click="createCode"/>
<!--提示信息-->
<spantype="text">{{ccc}}</span>
</div>
</body>
<!--importVuebeforeElement-->
<scriptsrc="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script>
newVue({
el:'#app',
data:function(){
return{
aaa:"",
bbb:"",
ccc:"提示信息"
}
},
created(){
this.createCode();//初始化生成一个4位数的验证码
},
methods:{
createCode(){
varcode="";
varcodeLength=4;//验证码的长度
varrandom=newArray(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
'S','T','U','V','W','X','Y','Z');//随机数
for(vari=0;i<codeLength;i++){
//循环操作
varindex=Math.floor(Math.random()*36);//取得随机数的索引（0~35）
code+=random[index];//根据索引取得随机数加到code上
}
this.bbb=code;//把code值赋给验证码
},
checkNum(){
varnum=this.aaa.toUpperCase();//输入内容全部转化为大写
if(num==this.bbb){
this.ccc="验证码正确";
}else{
this.ccc="验证码错误";
this.createCode();
}
}
}
})
</script>
</html>看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注恰卡编程网行业资讯频道，感谢您对恰卡编程网的支持。
目录
推荐阅读
0 条评论
本站已关闭游客评论，请登录或者注册后再评论吧~