小程序验证手机号页面及逻辑处理
前言：
常用页面以及组件模板------手机号验证以及绑定
我们获取的微信用户信息，只是存储在微信服务器的基本信息，但是在很多的应用中，我们需要绑定到用户手机号来进行更多的业务逻辑，今天就给出一个简单的页面demo。
效果图：
页面效果就是这样，接下来上代码
bindPhone.wxml
验证手机号
bindPhone.wxss
@import '../../template/loading/index.wxss';
.bindPhoneTitle {
width: 90%;
padding: 50rpx 5% 127rpx;
font-size: 48rpx;
font-family: PingFangSC-Medium;
font-weight: 500;
color: rgba(51, 51, 51, 1);
}
.formItemPhone {
width: 90%;
margin: 0 5%;
padding: 0 0 20rpx;
border-bottom: 1px solid rgba(226, 228, 232, 1);
margin-bottom: 40rpx;
position: relative;
}
.formItemPhone label {
display: inline-block;
width: 25%;
vertical-align: middle;
margin-right: 10%;
font-size: 32rpx;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(51, 51, 51, 1);
}
.formItemPhone input {
display: inline-block;
width: 65%;
vertical-align: middle;
font-size: 32rpx;
font-family: PingFangSC-Medium;
font-weight: 500;
color: rgba(51, 51, 51, 1);
}
.inputClass {
font-size: 32rpx;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(189, 199, 210, 1);
}
.codeBtn {
position: absolute;
right: 0;
bottom: 20rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(255, 139, 0, 1);
background: transparent;
padding: 0;
border: none;
outline: medium;
border-radius: 0;
z-index: 1000;
}
.codeBtn::after {
border: none;
outline: medium;
border-radius: 0;
}
.code_toast {
position: absolute;
right: 15rpx;
bottom: 20rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(189, 199, 210, 1);
}
.formBtn {
width: 90%;
height: 88rpx;
background: rgba(189, 199, 210, 1);
border-radius: 44rpx;
line-height: 88rpx;
font-size: 32rpx;
font-family: PingFangSC-Medium;
font-weight: 500;
color: rgba(255, 255, 255, 1);
border: none;
outline: medium;
margin-top: 175rpx;
}
.formBtn::after {
border: none;
outline: medium;
border-radius: 44rpx;
}
.formBtn.active {
background: rgba(255, 139, 0, 1);
color: rgba(255, 255, 255, 1);
}
bindPhone.js
import PublicFun from '../../utils/PublicFun.js';
const phoneRexp = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
Page({
data: {
btnTxt: '获取验证码',
isGetCode: false,
Loading: false,
countDown: 60,
formData: {
phone: '',
code: ''
}
},
onLoad(options) {
},
formSubmit(e) {
let that = this,
formData = e.detail.value,
errMsg = '';
that.setData({
Loading: true
})
if (!formData.phone){
errMsg = '手机号不能为空！';
}
if (!formData.code){
errMsg = '验证码不能为空！';
}
if (formData.phone){
if (!phoneRexp.test(formData.phone)) {
errMsg = '手机号格式有误！';
}
}
if (errMsg){
that.setData({
Loading: false
})
PublicFun._showToast(errMsg);
return false
}
//连接服务器进行验证码手机号验证操作
setTimeout(()=>{
that.setData({
Loading: false
})
},1500)
},
getPhoneCode() {
let that = this,
formData = that.data.formData,
errMsg = '' ;
errMsg = !formData.phone ? '手机号不能为空！' :
formData.phone && !phoneRexp.test(formData.phone) ? '手机号格式有误！' :
'' ;
if (errMsg){
PublicFun._showToast(errMsg);
return false
}
that.timer();
//连接服务器进行获取验证码操作
that.setData({
isGetCode: true
})
},
timer() {//验证码倒计时
let that = this,
countDown = that.data.countDown;
let clock = setInterval(() => {
countDown--
if (countDown >= 0) {
that.setData({
countDown: countDown
})
} else {
clearInterval(clock)
that.setData({
countDown: 60,
isGetCode: false,
btnTxt: '重新获取'
})
}
}, 1000)
},
Input(e) {//输入检索
let that = this,
formData = that.data.formData,
inputType = e.currentTarget.dataset.id,
inputValue = e.detail.value;
inputType === 'phone' ?
formData.phone = inputValue : formData.code = inputValue;
that.setData({
formData
})
}
})附带：
PublicFun.js
function _showToast(title) {
wx.showToast({
icon: "none",
title: title
})
}
module.exports ={
_showToast
}Loading文件为模板文件，方便多次调用
loading.wxml
loading.wxss
.loading_box {
width: 100%;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
z-index: 1000;
}
.loading_items{
text-align: center;
padding: 55% 0;
}
.loading_items>view {
display: inline-block;
}
.loading3 {
width: 20rpx;
height: 20rpx;
background: #ff8b00;
border-radius: 50%;
margin-left: 15rpx;
}
.loading3_1 {
-webkit-animation: loading3 1s linear infinite alternate;
animation: loading3 1s linear infinite alternate;
}
.loading3_2 {
-webkit-animation: loading3 1s linear infinite alternate;
animation: loading3 1s linear infinite alternate;
animation-delay: 0.5s;
}
.loading3_3 {
-webkit-animation: loading3 1s linear infinite alternate;
animation: loading3 1s linear infinite alternate;
animation-delay: 1s;
}
@-webkit-keyframes loading3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes loading3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}