近期遇到一個(gè)小程序需要驗(yàn)證用戶輸入核驗(yàn)碼進(jìn)行下一步，覺得挺有意思的。
頁面效果圖如下：

 
如圖：需要用戶輸入核驗(yàn)碼，或者點(diǎn)擊右邊的照相圖標(biāo)選擇二維碼圖片進(jìn)行上傳，然后點(diǎn)擊提交進(jìn)行驗(yàn)證，驗(yàn)證成功即進(jìn)入下一步驟，驗(yàn)證失敗則給出相應(yīng)提示：
用戶未輸入時(shí)提示：

用戶輸入錯(cuò)誤時(shí)：

提示核驗(yàn)碼無效，并且出現(xiàn)下面的購買鏈接。
 
頁面結(jié)構(gòu)wxml如下：
<view class="container">
<form bindsubmit="check_code">
<view class="box">
<view class="input_con">
<view class="input">
<input type="text" class="weui-input" value="{{code}}" name="code" placeholder-style='color:#999;' placeholder='請(qǐng)輸入你的唯一核驗(yàn)碼' ></input>
</view>
<view bindtap='scan_code' class="img">
<image src='/images/ico_camera.png'></image>
</view>
</view>
<view class="tips">
* 亦可通過相冊(cè)上傳核驗(yàn)二維碼進(jìn)行核驗(yàn)。
</view>
<view class="tips">
注意： 本次核驗(yàn)后，核驗(yàn)碼不要丟失或告知他人，后期仍將會(huì)用到。
</view>
<view class="btn">
<button type="primary" bindtap='share' form-type="submit">點(diǎn)擊提交</button>
</view>
<view class="msg">
{{msg}}
</view>
</view>
 
<view class="other hide{{showView?'':'show'}}">
<view class='shoping' bindtap='shoping'>
<image src='/images/ico_buy.png'></image> 點(diǎn)擊購買
</view>
<view class='tips'>* 如您暫未購買產(chǎn)品，可現(xiàn)在進(jìn)行購買并使用</view>
</view>
 
</form>
</view>
 
頁面樣式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如下：
下面是核驗(yàn)碼的驗(yàn)證

 
下面是二維碼的驗(yàn)證：

到此上述功能就實(shí)現(xiàn)了。

方維網(wǎng)絡(luò)專注于微信小程序定制開發(fā)，可根據(jù)用戶需求來定制，歡迎咨詢400-800-9385