高分十号卫星,寿光宣传网,带着山神种地
本文介绍了vue生成随机验证码的示例代码，分享给大家，具体如下：
样式自调，最终效果如图：
实现效果：
点击右边input框会自动切换，如果输入的值与字不同，则清空换一串随机数
html
<input type="text" placeholder="请输入验证码" class="yanzhengma_input" @blur="checklpicma" v-model="piclyanzhengma"> <input type="button" id="code" @click="createcode" class="verification1" v-model="checkcode"/> <br> <span class="tishixiaoxi disappear">请输入验证码。</span> <a class="user_login" @click="login">登录</a>
js
我要评论
// 图片验证码
createcode(){
code = "";
var codelength = 4;//验证码的长度
var random = new array(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(var i = 0; i < codelength; i++) {
//循环操作
var index = math.floor(math.random()*36);//取得随机数的索引（0~35）
code += random[index];//根据索引取得随机数加到code上
}
this.checkcode = code;//把code值赋给验证码
},
// 失焦验证图和密码
checklpicma(){
this.piclyanzhengma.touppercase();//取得输入的验证码并转化为大写
if(this.piclyanzhengma == '') {
//代码是直接复制项目内容，这里选择器选择时 请根据自己的需求来实现提示语效果，很简单，我懒，就不改了 ~
$(".login_content1 span:eq(2)").text("请输入验证码")
$(".login_content1 span:eq(2)").removeclass("disappear");
}else if(this.piclyanzhengma.touppercase() != this.checkcode ) {
//若输入的验证码与产生的验证码不一致时
console.log( this.piclyanzhengma.touppercase())
//代码是直接复制项目内容，这里选择器选择时 请根据自己的需求来实现提示语效果，很简单，我懒，就不改了 ~
$(".login_content1 span:eq(2)").text("验证码不正确")
$(".login_content1 span:eq(2)").removeclass("disappear");
this.createcode();//刷新验证码
this.piclyanzhengma = '';
}else {
//输入正确时
//代码是直接复制项目内容，这里选择器选择时 请根据自己的需求来实现提示语效果，很简单，我懒，就不改了 ~
$(".login_content1 span:eq(2)").addclass("disappear");
$(".login_content1 span:eq(2)").text("请输入验证码")
return true;
}
}
友情提示：本文直接从项目拿来供大家思路参考，验证提示那块大家可根据自己情况做更改。懒得改的可以去我github拿demo。
demo已放到鄙人github，也可自取：https://github.com/josie1988/js-random-authentication-code
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论