微信小程序实现手机号码验证
作者：云城雪华
这篇文章主要为大家详细介绍了微信小程序实现手机号码验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现手机号码验证的具体代码，供大家参考，具体内容如下
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() {
}
})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。