先给大家展示下效果图：
创新互联专注于兰坪网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供兰坪营销型网站建设，兰坪网站制作、兰坪网页设计、兰坪网站官网定制、成都微信小程序服务，打造兰坪网络公司原创品牌,更为您提供兰坪网站排名全网营销落地服务。
1.html代码
2.css样式
/*验证码样式*/
.code{
width:124px;
height:31px;
border:1px solid rgba(186,186,186,1);
}
.login-code{
cursor: pointer;
}3.js引入验证码组件,并且定义三个变量。
import SIdentify from '../components/sidentify'
components: { SIdentify },
data () {
return {
identifyCodes: "1234567890",
identifyCode: "",
code:"",//text框输入的验证码
}
}, 4.mounted里的代码
mounted(){
this.identifyCode = "";
this.makeCode(this.identifyCodes, 4);
},5.在created里初始化验证码
6.methods里添加以下方法。
需要用到的方法
//验证码
randomNum(min, max) {
return Math.floor(Math.random() * (max - min) + min);
},
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)
];
}
console.log(this.identifyCode);
},在提交表单的时候对验证码进行判断。
sidentify.vue组件代码：
总结
以上所述是小编给大家介绍的vue实现随机验证码功能的实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
文章标题：vue实现随机验证码功能的实例代码
网站地址：
http://cdkjz.cn/article/jgcjig.html
