介绍 & lt; ! DOCTYPE html>
& lt; html>
& lt; head>
,& lt; meta charset=癠TF-8"比;
& lt;/head>
& lt; body>
,& lt; div id=癮pp"比;
& lt; !——,才能验证码输入框,——比;
& lt;才能input 类型=皌ext", v模型=癮aa", @blur=癱heckNum",/比;
& lt; !——,才能验证码切换按钮,——比;
& lt;才能input 类型=癰utton", v模型=癰bb", @click=癱reateCode"/比;
& lt; !——,才能提示信息,——比;
& lt;才能span 类型=皌ext",在{{,ccc }} & lt;/span>
,& lt;/div>
& lt;/body>
,& lt; !——, import Vue before Element ——比;
,& lt; script src=癶ttps://cdn.bootcss.com/vue/2.4.4/vue.min.js"祝辞& lt;/script>
,& lt; script>
Vue ({new 才能;
,,,el: & # 39; #应用# 39;
,,,数据:函数(),{
,,,return {
,,,,aaa级:““,
,,,,bbb:““,
,,,,ccc:“提示信息,
,,,}
,,},
,才能创建(){
,,,this.createCode();//初始化生成一个4位数的验证码
,,},
,,,方法:{
,,,createCode () {
,,,,,var code =,““
,,,,,var codeLength =, 4,//验证码的长度
,,,,,var random =, new 阵列(0,1,2,3,4,5,6,7,8,9,& # 39;一个# 39;,& # 39;b # 39;, & # 39; c # 39;, & # 39; d # 39;, & # 39; e # 39;, & # 39; f # 39;, & # 39;舌鳎# 39;,& # 39;h # 39;, & # 39;我# 39;,& # 39;强生# 39;,& # 39;k # 39;, & # 39; l # 39;, & # 39;猴# 39;,& # 39;n # 39;, & # 39; o # 39;, & # 39; p # 39;, & # 39;提问# 39;,& # 39;" # 39;,
,,,,,,& # 39;& # 39;& # 39;t # 39; & # 39; u # 39;, & # 39; v # 39; & # 39; w # 39;, & # 39; x # 39; & # 39; y # 39;, & # 39; z # 39;);//随机数
,,,,,,(var 小姐:=,0;,小姐:& lt;, codeLength;,我+ +),{
,,,,,//循环操作
,,,,,var index =, Math.floor (math . random() * 36);//取得随机数的索引(0 ~ 35)
,,,,,code +=,随机(指数);//根据索引取得随机数加到代码上
,,,,,}
,,,,,this.bbb =,代码;//把代码值赋给验证码
,,,},
,,,checkNum () {
,,,,var num =, this.aaa.toUpperCase();//输入内容全部转化为大写
,,,,如果(num ==, this.bbb) {
,,,,,this.ccc =,“验证码正确“;
,,,,其他}{
,,,,,this.ccc =,“验证码错误“;
,,,,,this.createCode ();
,,,,}
,,,}
,,}
})才能
,& lt;/script>
& lt;/html>
使用vuejs如何实现一个验证码功能吗?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
具体如下:
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注行业资讯频道,感谢您对的支持。
