微信小程序手機號碼驗證功能的實例代碼
更新時間：2018年08月28日 09:14:06 作者：onlineline
這篇文章主要介紹了微信小程序手機號碼驗證功能的實例代碼及微信小程序正則判斷手機號的方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
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
})
}
},
/**
* 生命周期函數--監(jiān)聽頁面加載
*/
onLoad: function(options) {
},
/**
* 生命周期函數--監(jiān)聽頁面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函數--監(jiān)聽頁面顯示
*/
onShow: function() {
},
/**
* 生命周期函數--監(jiān)聽頁面隱藏
*/
onHide: function() {
},
/**
* 生命周期函數--監(jiān)聽頁面卸載
*/
onUnload: function() {
},
/**
* 頁面相關事件處理函數--監(jiān)聽用戶下拉動作
*/
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 (!myreg.test(this.data.Del)) {
wx.showToast({
title: '手機號有誤！',
icon: 'success',
duration: 1500
})
return false;
} else {
wx.showToast({
title: '填寫正確',
icon: 'success',
duration: 1500
})
}
總結
以上所述是小編給大家介紹的微信小程序手機號碼驗證功能的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
javascript和php使用ajax通信傳遞JSON的實例
今天小編就為大家分享一篇javascript和php使用ajax通信傳遞JSON的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
本文主要分享了原生JS下拉加載插件的實現(xiàn)代碼。具有一定的參考價值，需要的朋友一起來看下吧2016-12-12
這篇文章介紹了JavaScript獲取FCK編輯器信息的實例代碼，有需要的朋友可以參考一下2013-07-07
這篇文章主要給大家介紹了關于前端小程序中.env?文件夾的相關資料,.env文件夾允許開發(fā)者在不同的環(huán)境中配置不同的變量值,以便在小程序的不同階段或環(huán)境中使用,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-05-05
javascript實現(xiàn)可拖動變色并關閉層窗口實例
這篇文章主要介紹了javascript實現(xiàn)可拖動變色并關閉層窗口的方法,涉及javascript操作層的樣式與屬性的相關技巧,需要的朋友可以參考下2015-05-05
JavaScript中如何判斷一個變量是數組Array類型呢？本文向大家提供一個比較不錯的方法，可以說是無懈可擊了2013-09-09
JavaScript實現(xiàn)同一頁面內兩個表單互相傳值的方法
這篇文章主要介紹了JavaScript實現(xiàn)同一頁面內兩個表單互相傳值的方法,涉及javascript鼠標事件及頁面元素賦值操作的相關技巧,需要的朋友可以參考下2015-08-08
學習javascript面向對象 掌握創(chuàng)建對象的9種方式
這篇文章主要為大家介紹了創(chuàng)建對象的9種方式，幫助大家更好地學習javascript面向對象，感興趣的小伙伴們可以參考一下2016-01-01
模仿選擇文件夾效果的javascript封裝類，效果不錯，實際應用呢，暫時用不到，大家可以學習思路2008-09-09
這篇文章主要為大家詳細介紹了js手機號批量滾動抽獎實現(xiàn)代碼，s適用于年會等活動，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01