本文实例为大家分享了微信小程序实现手机号码验证的具体代码，供大家参考，具体内容如下
wxml
<form bindsubmit='formSubmit'>
<view class='all'>
<text>手机号：</text>
<input name="phone" placeholder='请输入手机号' type='number' style='color:#333' placeholder-style="color:#666" maxlength="11" bindinput='blurPhone'></input>
</view>
<button formType="submit">保存</button>
</form>wxss
.all {
border-top: 1rpx solid #efefef;
border-bottom: 1rpx solid #efefef;
height: 98rpx;
font-size: 28rpx;
display: flex;
align-items: center;
}
button {
width: 480rpx;
height: 80rpx;
background-color: #7ecffd;
font-size: 30rpx;
color: #fff;
border-radius: 8px;
margin: 50rpx auto;
}js
Page({
data: {
ajxtrue: false,
},
// 手机号验证
blurPhone: function(e) {
var phone = e.detail.value;
let that = this
if (!(/^1[34578]\d{9}$/.test(phone))) {
this.setData({
ajxtrue: false
})
if (phone.length >= 11) {
wx.showToast({
title: '手机号有误',
icon: 'success',
duration: 2000
})
}
} else {
this.setData({
ajxtrue: true
})
console.log('验证成功', that.data.ajxtrue)
}
},
// 表单提交
formSubmit(e) {
let that = this
let val = e.detail.value
let ajxtrue = this.data.ajxtrue
if (ajxtrue == true) {
//表单提交进行
} else {
wx.showToast({
title: '手机号有误',
icon: 'success',
duration: 2000
})
}
},
onLoad: function(options) {
},
onReady: function() {
},
onShow: function() {
},
onHide: function() {
},
onUnload: function() {
},
onPullDownRefresh: function() {
},
onReachBottom: function() {
},
onShareAppMessage: function() {
}
})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
