微信小程序判斷手機號是否合法的實例代碼
更新時間：2021年09月18日 10:35:15 作者：喵喵喵喵要抱抱
我們在微信小程序開發(fā)的時候,手機號的驗證是經(jīng)常需要操作的,那么如何驗證手機號呢?這篇文章主要給大家介紹了關于微信小程序判斷手機號是否合法的相關資料,需要的朋友可以參考下
場景
在注冊頁面輸入手機號，在請求注冊接口前先行判別輸入的手機號碼是否合法；
效果
代碼
導入 vant-weapp 組件：user-register.json
{
"usingComponents": {
"van-cell-group": "@vant/weapp/cell-group/index",
"van-field": "@vant/weapp/field/index",
"van-dropdown-menu": "@vant/weapp/dropdown-menu/index",
"van-dropdown-item": "@vant/weapp/dropdown-item/index",
"van-button": "@vant/weapp/button/index"
}
}
編寫布局文件：user-register.wxml
<!-- pages/user-register/user-register.wxml -->
<view class="register-block">
<view class="title">
<text class="text">注冊</text>
</view>
<van-cell-group class="input">
<van-field label="學號" value="{{ studentNumber }}" placeholder="請輸入學號" required clearable center bind:blur="setStudentNumber" />
<van-field label="用戶名" value="{{ userName }}" placeholder="請輸入用戶名" required clearable center bind:blur="setUsername" />
<van-field label="班級" value="{{ className }}" placeholder="請輸入所在班級" required clearable center bind:blur="setClassName" />
<van-field label="手機號" value="{{ phoneNumber }}" placeholder="請輸入手機號" error="{{ phoneLength || phoneFormat }}" error-message="{{ phoneError }}" required clearable center bind:blur="setphoneNumber" />
<van-field label="性別" required use-input-slot>
<view style="position: absolute; left: -16rpx;" slot="input">
<van-dropdown-menu active-color="#92B6D5">
<van-dropdown-item value="{{ gender }}" options="{{ option1 }}" bind:change="changeGender" />
</van-dropdown-menu>
</view>
</van-field>
<van-field label="校區(qū)" required use-input-slot>
<view style="position: absolute; left: -16rpx;" slot="input">
<van-dropdown-menu active-color="#92B6D5">
<van-dropdown-item value="{{ area }}" options="{{ option2 }}" bind:change="changeArea" />
</van-dropdown-menu>
</view>
</van-field>
<van-field label="密碼" value="{{ password }}" placeholder="請輸入密碼" required clearable center type="password" bind:blur="setPassword" />
<van-field label="確認密碼" value="{{ repassword }}" placeholder="請再次輸入密碼" error="{{ rePwdEqual }}" error-message="{{ errorMsg }}" required clearable center type="password" bind:blur="setRePassword" />
</van-cell-group>
<view class="login-block">
<text class="text" bind:tap="gotoLogin">立即登錄</text>
<!-- <text class="">忘記密碼</text> -->
</view>
<van-button class="btn" size="large" type="info" bind:tap="userRegister">注冊</van-button>
</view>
編寫樣式文件：user-register.scss
/* pages/user-register/user-register.scss */
.register-block{
margin: 200rpx 20rpx 0 20rpx;
.title{
text-align: center;
margin-bottom: 60rpx;
.text{
font-size: 60rpx;
font-weight: 300;
}
}
.login-block{
text-align: right;
margin: 10rpx 0;
.text{
color: gray;
font-weight: 300;
font-size: smaller;
}
}
}
判斷手機號是否合法
/**
* 輸入手機號
*/
setphoneNumber: function (event) {
// console.log('username', event.detail.value)
this.setData({
phoneNumber: event.detail.value
})
const regex = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/
if (this.data.phoneNumber.length !== 0 && this.data.phoneNumber.length !== 11) {
this.setData({
phoneLength: true,
phoneError: '手機長度有誤'
})
} else if (this.data.phoneNumber.length !== 0 && !regex .test(this.data.phoneNumber)) {
this.setData({
phoneFormat: true,
phoneError: '手機號有誤'
})
}
},
完整js文件：user-register.js
// pages/user-login/user-login.js
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
studentNumber: '',
userName: '',
className: '',
phoneNumber: '',
mygender: '',
schoolarea: '',
password: '',
repassword: '',
gender: 0,
option1: [
{ text: '請選擇性別', value: 0 },
{ text: '男', value: 1 },
{ text: '女', value: 2 }
],
area: 0,
option2: [
{ text: '請選擇所在校區(qū)', value: 0 },
{ text: '北校區(qū)', value: 1 },
{ text: '南校區(qū)', value: 2 }
],
// 錯誤提示
rePwdEqual: false,
phoneLength: false,
phoneFormat: false
},
/**
* 輸入學號
*/
setStudentNumber: function (event) {
// console.log('username', event.detail.value)
this.setData({
studentNumber: event.detail.value
})
},
/**
* 輸入用戶名
*/
setUsername: function (event) {
// console.log('username', event.detail.value)
this.setData({
userName: event.detail.value
})
},
/**
* 輸入所在班級
*/
setClassName: function (event) {
// console.log('username', event.detail.value)
this.setData({
className: event.detail.value
})
},
/**
* 輸入手機號
*/
setphoneNumber: function (event) {
// console.log('username', event.detail.value)
this.setData({
phoneNumber: event.detail.value
})
const myReg = /^(((13[0-9{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})) + \d{8})$/
if (this.data.phoneNumber.length !== 0 && this.data.phoneNumber.length !== 11) {
this.setData({
phoneLength: true,
phoneError: '手機長度有誤'
})
} else if (this.data.phoneNumber.length !== 0 && !myReg.test(this.data.phoneNumber)) {
this.setData({
phoneFormat: true,
phoneError: '手機號有誤'
})
}
},
/**
* 修改性別
* @param {*} event
*/
changeGender: function (event) {
if (event.detail === 1) {
this.setData({
mygender: '男'
})
} else if (event.detail === 2) {
this.setData({
mygender: '女'
})
} else if (event.detail === 0) {
wx.showToast({
title: '請選擇性別', // 提示的內(nèi)容
duration: 2000, // 延遲時間
mask: true // 顯示透明蒙層，防止觸摸穿透
})
}
console.log('改性別', event.detail + this.data.mygender)
},
/**
* 修改所在校區(qū)
*/
changeArea: function (event) {
if (event.detail === 1) {
this.setData({
schoolarea: '北校區(qū)'
})
} else if (event.detail === 2) {
this.setData({
schoolarea: '南校區(qū)'
})
} else if (event.detail === 0) {
wx.showToast({
title: '請選擇所在校區(qū)', // 提示的內(nèi)容
duration: 2000, // 延遲時間
mask: true // 顯示透明蒙層，防止觸摸穿透
})
}
console.log('改校區(qū)', event.detail + this.data.schoolarea)
},
/**
* 輸入密碼
*/
setPassword: function (event) {
// console.log('password', event.detail.value)
this.setData({
password: event.detail.value
})
},
/**
* 再次輸入密碼
*/
setRePassword: function (event) {
// console.log('repassword', event.detail.value)
this.setData({
repassword: event.detail.value
})
if (this.data.password === this.data.repassword && this.data.password.length !== 0) {
this.setData({
rePwdEqual: false,
errorMsg: ''
})
} else if (this.data.password !== this.data.repassword && this.data.password.length !== 0) {
this.setData({
rePwdEqual: true,
errorMsg: '兩次輸入的密碼不一致'
})
}
},
/**
* 進入登錄界面
*/
gotoLogin: function () {
// 當前要跳轉(zhuǎn)到另一個界面，但是會保留現(xiàn)有界面
wx.redirectTo({
url: '../user-login/user-login'
})
},
/**
* 請求注冊
*/
userRegister: function () {
// console.log('studentNumber', this.data.studentNumber)
// console.log('userName', this.data.userName)
// console.log('className', this.data.className)
// console.log('phoneNumber', this.data.phoneNumber)
// console.log('mygender', this.data.mygender)
// console.log('schoolarea', this.data.schoolarea)
const existStudentNumber = this.data.studentNumber.length !== 0
const existUserName = this.data.userName.length !== 0
const existClassName = this.data.className.length !== 0
const existPhoneNumber = this.data.phoneNumber.length !== 0
const existGender = this.data.mygender.length !== 0
const existArea = this.data.schoolarea.length !== 0
// console.log('studentNumber', existStudentNumber)
// console.log('userName', existUserName)
// console.log('className', existClassName)
// console.log('phoneNumber', existPhoneNumber)
// console.log('mygender', existGender)
// console.log('schoolarea', existArea)
if (existStudentNumber && existUserName && existClassName && existPhoneNumber && existGender && existArea && !this.data.rePwdEqual && !this.data.phoneLength && !this.data.phoneFormat) {
if (this.data.password === this.data.repassword && this.data.password !== '') {
// 發(fā)起網(wǎng)絡請求
wx.request({
url: 'http://api/user/register',
method: 'post',
data: {
student_number: this.data.studentNumber,
class_name: this.data.className,
name: this.data.userName,
phone_number: this.data.phoneNumber,
gender: this.data.mygender,
area: this.data.schoolarea,
password: this.data.password,
second_password: this.data.repassword
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success(res) {
console.log(res)
if (res.data.code === 200) {
wx.showToast({
title: '注冊成功！',
icon: 'success'
})
wx.redirectTo({
url: '/pages/user-login/user-login'
})
} else {
wx.showToast({
title: '注冊失??！',
icon: 'none'
})
console.log('注冊失敗！')
console.log(res)
}
},
fail(msg) {
console.log(msg)
}
})
}
} else if (!existStudentNumber) {
wx.showToast({
title: '學號不能為空！',
icon: 'none'
})
} else if (!existUserName) {
wx.showToast({
title: '用戶名不能為空！',
icon: 'none'
})
} else if (!existClassName) {
wx.showToast({
title: '班級不能為空！',
icon: 'none'
})
} else if (!existPhoneNumber) {
wx.showToast({
title: '手機號不能為空！',
icon: 'none'
})
} else if (!existGender) {
wx.showToast({
title: '請選擇性別！',
icon: 'none'
})
} else if (!existArea) {
wx.showToast({
title: '請選擇所在校區(qū)！',
icon: 'none'
})
} else {
wx.showToast({
title: '請按提示輸入相關信息！',
icon: 'none'
})
}
},
/**
* 生命周期函數(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 () {
},
/**
* 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
總結(jié)
到此這篇關于微信小程序判斷手機號是否合法的文章就介紹到這了,更多相關微信小程序判斷手機號合法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關文章
本文通過實例代碼給大家介紹了js反彈動畫效果的實現(xiàn)代碼，需要的朋友參考下吧2017-07-07
TypeScript中的映射類型和數(shù)學中的映射類似,能夠?qū)⒁粋€集合的元素轉(zhuǎn)換為新集合的元素,本文就來介紹一下TypeScript中類型映射的使用,感興趣的可以了解一下2023-10-10
本文主要介紹了代碼優(yōu)化頁面加載速度的方法。具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
本文將介紹Javascript模式中較為常見和實用的模式——單例模式，主要分為概念和實例部分。在介紹實例的同時也會對代碼中額外的知識點進行講解。需要的朋友可以看下2016-12-12
讓html元素隨瀏覽器的大小自適應垂直居中的實現(xiàn)方法
下面小編就為大家?guī)硪黄宧tml元素隨瀏覽器的大小自適應垂直居中的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
基于JavaScript或jQuery實現(xiàn)網(wǎng)站夜間/高亮模式
這篇文章主要介紹了基于JavaScript或jQuery實現(xiàn)網(wǎng)站夜間/高亮模式,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了小程序中的箭頭函數(shù)的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
簡直的展開或關閉2008-11-11
這篇文章主要為大家介紹了JS利用中介模式開發(fā)全局控制器圖文示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
這篇文章主要介紹了微信小程序如何訪問公眾號文章，隨著小程序不斷的發(fā)展，現(xiàn)在個人的小程序也開放了很多功能了，個人小程序直接打開公眾號鏈接。在群里看到的一款小程序，點擊可以直接閱讀文章了,需要的朋友可以參考下2019-07-07