vuejs简单验证码功能完整示例
本文实例讲述了vuejs简单验证码功能。分享给大家供大家参考，具体如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<!-- 验证码输入框 -->
<input type="text" v-model="aaa" @blur="checkNum" />
<!-- 验证码切换按钮 -->
<input type="button" v-model="bbb" @click="createCode"/>
<!-- 提示信息 -->
<span type="text" style="color: red;">{{ ccc }}</span>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return {
aaa:"",
bbb:"",
ccc:"提示信息"
}
},
created(){
this.createCode();//初始化生成一个4位数的验证码
},
methods: {
createCode(){
var 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.bbb = code;//把code值赋给验证码
},
checkNum(){
var num = this.aaa.toUpperCase();//输入内容全部转化为大写
if(num == this.bbb){
this.ccc = "验证码正确";
}else{
this.ccc = "验证码错误";
this.createCode();
}
}
}
})
</script>
</html>
使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun运行上述代码，可得到如下运行结果：
希望本文所述对大家vue.js程序设计有所帮助。
-
本文向大家介绍JS实现的简单表单验证功能示例，包括了JS实现的简单表单验证功能示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现的简单表单验证功能。分享给大家供大家参考，具体如下： 源代码： myjs1.js文件代码: 注意：在js中声明变量用var，定义函数用function, 这个例子可以实现 爱好的验证(不能为空) ，密码是否一致，而且密码的长度要大于8，备注是否为空! 另
-
本文向大家介绍VueJs组件prop验证简单介绍，包括了VueJs组件prop验证简单介绍的使用技巧和注意事项，需要的朋友参考一下 组件 Vue.js引入的组件，让分解单一HTML到独立组件成为可能。组件可以自定义元素形式使用，或者使用原生元素但是以is特性做扩展。 今天看了vuejs的组件，看到了prop组件，主要作用是在传入数据的时候对传入的值做判断，写了个小例子。 输出结果 这里都是通过验证
-
本文向大家介绍Vue验证码60秒倒计时功能简单实例代码，包括了Vue验证码60秒倒计时功能简单实例代码的使用技巧和注意事项，需要的朋友参考一下 template script css（scss写法） 总结 以上所述是小编给大家介绍的Vue验证码60秒倒计时功能简单实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持！
-
本文向大家介绍ajax实现简单实时验证功能，包括了ajax实现简单实时验证功能的使用技巧和注意事项，需要的朋友参考一下 什么是ajax Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。 Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。 Ajax 是一种
-
本文向大家介绍简单实现vue验证码60秒倒计时功能，包括了简单实现vue验证码60秒倒计时功能的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了vue验证码倒计时60秒的具体代码，供大家参考，具体内容如下 html js 更多关于倒计时的文章请查看专题：《倒计时功能》 更多JavaScript时钟特效点击查看：JavaScript时钟特效专题 以上就是本文的全部内容，希望对大家的学习有
-
本文向大家介绍PHP生成图片验证码功能示例，包括了PHP生成图片验证码功能示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了PHP生成图片验证码功能。分享给大家供大家参考，具体如下： 只是简单的用随机函数实现了图片的生成，没有对验证的整个流程做介绍。 代码如下： 运行效果如下： PS：这里再为大家推荐几款比较实用的图片处理工具供大家参考使用： 在线图片转换BASE64工具： http:/