微信小程序实现手机号码验证

本文实例为大家分享了微信小程序实现手机号码验证的具体代码，供大家参考，具体内容如下

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() {
?
? }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于微信小程序实现手机号码验证的详细内容...