小程序手机号码验证功能的实例代码
⼩程序⼿机号码验证功能的实例代码
wxml
<form bindsubmit='formSubmit'>
<view class='all'>
<text>⼿机号：</text>
<input name="phone" placeholder='请输⼊⼿机号' type='number' style='color:#333' placeholder- 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() {
}
})
下⾯看下⼩程序正则判断⼿机号的⽰例代码
var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
if (this.data.Del.length == 0) {
wx.showToast({
title: '输⼊的⼿机号为空',
icon: 'success',
duration: 1500
})
return false;
} else if (this.data.Del.length < 11) {
wx.showToast({
title: '⼿机号长度有误！',
icon: 'success',
duration: 1500
})
return false;
} else if (!st(this.data.Del)) {
wx.showToast({
title: '⼿机号有误！',
icon: 'success',
duration: 1500
})
return false;
} else {
wx.showToast({
title: '填写正确',
icon: 'success',
duration: 1500
})
}
总结
以上所述是⼩编给⼤家介绍的⼩程序⼿机号码验证功能的实例代码，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。