简单生成微信小程序随机验证码

废话不多说，直接上图看效果

一、实现功能：

1、点击灰色底的验证码图片可以更换一张验证码

2、验证输入的验证码是否正确，并且输入小大写英文都可以、

二、核心代码：

注意：我是用uni-app框架写的，用原生写的朋友自行修改一下写法哈

html的代码：

<template><view><form @submit="formSubmit"><view class="down"><view>验证码：</view><input class="down_input" name="code"></input><text class="true_code" @tap="changeCode">{{code}}</text></view><button class="btn" form-type="submit">提交</button></form></view>
</template>

样式的代码：

<style>.down{width: 90%;margin: 0 auto;height: 50rpx;display: flex;flex-direction: row;margin-top: 20rpx;}.down_input{width: 110rpx;height: 50rpx;line-height: 50rpx;border:  1px solid #CCCCCC;border-radius: 6px;padding-left: 20rpx;}.btn{width: 300rpx;height: 70rpx;line-height: 70rpx;margin:0 auto;margin-top: 50rpx;color: white;background: #23EBB9;}.true_code{width: 150rpx;height: 52rpx;line-height: 50rpx;text-align: center;font-family: Arial;font-style: italic;font-weight: bold;border: 0;letter-spacing: 3px;font-size: 18px;background-color: #ccc;margin-left: 30rpx;
/*        padding: 10rpx; */margin-right: 20rpx;color: black;}
</style>

js的代码：

<script>export default {data() {return {code:""}},methods: {formSubmit(e){if(e.detail.value.code=""){uni.showToast({title:"请输入验证码",icon:"none"})}//将输入的验证码和生成的验证码都转为全大写字母，然后再比较是否相等else if(e.detail.value.code.toUpperCase()==this.code.toUpperCase()){console.log("验证码输入正确")}},changeCode(e){var code;//首先默认code为空字符串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','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');//循环codeLength 我设置的4就是循环4次for (var i = 0; i < codeLength; i++) {//设置随机数范围,这设置为0 ~ 62（10+26+26）var index = Math.floor(Math.random() * 62);//字符串拼接 将每次随机的字符 进行拼接code += random[index];}this.code=code;}},onLoad() {this.changeCode();}}
</script>

简单生成微信小程序随机验证码相关推荐

开发微信小程序，就是这么简单！可自动生成微信小程序源代码，配套JS SDK、接口和后台
开发微信小程序,就是这么简单!自己动手,丰衣足食! 开发微信小程序有多简单?  你只需要掌握前端开发,就可以轻松开发自己的微信小程序,实现自己的业务功能.借助果创云,无须域名.无须服务器.无须数据库, ...
（已更新）趣味制作生成微信小程序源码下载-安装简单方便
这是一个diy类型的制作生成小程序源码里面有多种素材生成,可以用来娱乐吧! 比如有的类型如:退出酒场告知书,喝酒认怂书,等等小程序安装的话还是挺方便的,特别适合新手 PS:里面的二维码的话小编替换 ...
【小程序源码】检讨书生成微信小程序工具源码-安装搭建简单
对于经常写检讨的小伙伴来说,福音来了因为这是一款检讨书生成小程序所以再也不用为了写检讨而烦恼了哦支持自定义字数下线,主题自定义支持多种类型检讨比如:学生党的,男朋友,领导演讲稿,共青团申请书等 ...
检讨书生成微信小程序工具源码-拥有流量主安装搭建简单
对于经常写检讨的小伙伴来说,福音来了因为这是一款检讨书生成小程序所以再也不用为了写检讨而烦恼了哦支持自定义字数下线,主题自定义支持多种类型检讨比如:学生党的,男朋友,领导演讲稿,共青团申请书等 ...
小程序源码：闪照制作生成微信小程序源码下载,自定义闪照时间-多玩法安装简单
这是一款闪照制作的一款微信小程序源码该源码呢也就是让用户在微信也可以实现QQ上面的闪照功能用户可以自主上传照片,可以自定义的选择闪照的时间另外这款小程序还支持流量主模式这种东西目前在微信还是挺 ...
Java生成微信小程序二维码，5种实现方式，一个比一个简单
文章目录前言先看官网一.JDK自带的URLConnection方式二.Apache的HttpClient方式三.okhttp3方式四.Unirest方式五.RestTemplate方式 ...
小程序源码：2022全新超火超热门模板的姓氏头像制作生成微信小程序源码-多玩法安装简单
这是一款姓氏头像小程序源码姓氏头像可以说是一个比较热门的一个东西之前小编也发过好几款姓氏头像小程序源码但是模板都太单一了,虎年哪一款在这之前还是挺好的因为检查有模板更新而且还不需要重新更新源码 ...
微信小程序-动态验证码
微信小程序-动态验证码一.创建自定义组件verification-code 二.在index页面使用一.创建自定义组件verification-code verification-code.js ...
免费生成微信小程序的经验
为了做小程序,我试过自己开发,也用过市面上的可以免费一键生成小程序的平台.对于新手来说还是有蛮多需要注意的地方,为避免大家走弯路,就跟大家分享一下我的一些关于免费生成微信小程序的经验. 1.小程序到底 ...

简单生成微信小程序随机验证码

简单生成微信小程序随机验证码相关推荐

最新文章

热门文章