快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)手機號碼驗證

更新時間：2022年07月01日 10:50:14 作者：云城雪華

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)手機號碼驗證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序?qū)崿F(xiàn)手機號碼驗證的具體代碼，供大家參考，具體內(nèi)容如下

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({
?
? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? 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
? ? ? })
? ? }
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面加載
? ?*/
? onLoad: function(options) {
?
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
? ?*/
? onReady: function() {
?
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面顯示
? ?*/
? onShow: function() {
?
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面隱藏
? ?*/
? onHide: function() {
?
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面卸載
? ?*/
? onUnload: function() {
?
? },
?
? /**
? ?* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
? ?*/
? onPullDownRefresh: function() {
?
? },
?
? /**
? ?* 頁面上拉觸底事件的處理函數(shù)
? ?*/
? onReachBottom: function() {
?
? },
?
? /**
? ?* 用戶點擊右上角分享
? ?*/
? onShareAppMessage: function() {
?
? }
})

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: