近期遇到一个小法式必要考证用户输出核验码举行下一步，感觉挺成心机的。
页面结果图以下：

如图：必要用户输出核验码，或点击右边的拍照图标遴选二维码图片举行上传，然后点击提交举行考证，考证乐成即进入下一步调，网站建设公司，考证失利则给出响应提示：
用户未输出时提示：

用户输出弊端时：

提示核验码有效，并且出现下面的购置,链接。

页面结构wxml以下：












* 亦可经由过程相册上传核验二维码举行核验。


留神： 本次核验后，核验码不要丧失或示知别人，前期仍将会用到。


点击提交


{{msg}}





点击购置,

* 如您暂未购置,产品，可现在举行购置,并使用





页面名目wxss以下：
page{
background: #fefefe;
}
.container {
padding-top: 54rpx;
}
.box{
width:650rpx;
margin:20rpx auto 0;
}
.input_con{
width: 100%;
border-bottom: 1rpx solid #dedcdf;
display: flex;
margin-bottom: 18rpx;
}
.input_con .input{
border: none;
width:560rpx;
}
.input_con .input input{
width: 100%;
height: 88rpx;
border: none;
padding-left: 40rpx;
box-sizing: border-box;
font-size: 28rpx;
}
.input_con .img{
margin-left:18rpx;
margin-top: 24rpx;
}
.input_con .img image{
width:48rpx;
height:40rpx;
}

.tips{
width: 570rpx;
font-size: 18rpx;
line-height: 42rpx;
color: #999;
box-sizing: border-box;
margin: auto;
}

.btn{
margin-top: 84rpx;
}
.btn button{
width: 544rpx;
height: 85rpx;
border-radius: 42rpx;
background-image: linear-gradient(0deg, #0c9ff3 0%,#22e7e4 100%);
box-shadow: 0 5rpx 0 5rpx rgba(76,218,204,.25);
font-size: 32rpx;
color: #fff;
}
.input_con .msg{
margin-top:10rpx;
}

.other{
width: 544rpx;
margin: 360rpx auto 0;
}
.hide{
display: none;
}
.show{
display: block;
}
.other .shoping{
width: 100%;
height: 85rpx;
border-radius: 42rpx;
background-image: linear-gradient(0deg, #f98a1e 0%,#f4bc33 100%);
box-shadow: 0 5rpx 0 5rpx rgba(218,163,76,.25);
display: flex;
justify-content: center;
align-items: center;
font-size: 32rpx;
color: #fff;
}
.other .shoping image{
width: 50rpx;
height: 40rpx;
margin-right: 15rpx;
}
.other .tips{
font-size: 18rpx;
color: #999;
text-align: center;
line-height: 1;
margin-top: 32rpx;
}

页面js以下：
下面是核验码的考证

下面是二维码的考证：

到此上述效果就完成了。

方维汇集专注于微信小法式定制开拓，可按照用户需求来定制，欢迎征询400-800-9385