近期遇到一個小程序需要驗證用戶輸入核驗碼進行下一步，覺得挺有意思的。

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

用戶未輸入時提示：

用戶輸入錯誤時：
提示核驗碼無效，并且出現(xiàn)下面的購買鏈接。
頁面結(jié)構(gòu)wxml如下：

* 亦可通過相冊上傳核驗二維碼進行核驗。


注意： 本次核驗后，核驗碼不要丟失或告知他人，后期仍將會用到。


點擊提交


{{msg}}




點擊購買

* 如您暫未購買產(chǎn)品，可現(xiàn)在進行購買并使用

頁面樣式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如下：

下面是核驗碼的驗證

下面是二維碼的驗證：

本文名稱：微信小程序如何驗證用戶輸入信息
鏈接URL：http://vcdvsql.cn/news/242272.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、企業(yè)網(wǎng)站制作、網(wǎng)頁設(shè)計公司、網(wǎng)站建設(shè)、App開發(fā)、動態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)