微信小程序判斷手機號是否合法的實例代碼
更新時間：2021年09月18日 10:35:15 作者：喵喵喵喵要抱抱
我們在微信小程序開發(fā)的時候,手機號的驗證是經(jīng)常需要操作的,那么如何驗證手機號呢?這篇文章主要給大家介紹了關(guān)于微信小程序判斷手機號是否合法的相關(guān)資料,需要的朋友可以參考下
場景
在注冊頁面輸入手機號，在請求注冊接口前先行判別輸入的手機號碼是否合法；
效果
代碼
導(dǎo)入 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="學(xué)號" value="{{ studentNumber }}" placeholder="請輸入學(xué)號" 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
},
/**
* 輸入學(xué)號
*/
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 () {
// 當(dāng)前要跳轉(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)絡(luò)請求
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: '學(xué)號不能為空！',
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: '請按提示輸入相關(guān)信息！',
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 () {
},
/**
* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
總結(jié)
到此這篇關(guān)于微信小程序判斷手機號是否合法的文章就介紹到這了,更多相關(guān)微信小程序判斷手機號合法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
JavaScript 阻止超鏈接跳轉(zhuǎn)的操作方法(多種寫法)
很多朋友問小編能否通過JavaScript來阻止超鏈接的跳轉(zhuǎn)呢，今天給大家通過多種寫法來實現(xiàn)這一功能，具體實例代碼跟隨小編一起看看吧2021-06-06
下面小編就為大家?guī)硪黄獪\談JavaScript對象的創(chuàng)建方式。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-06-06
表單常見的元素主要包括：文本輸入框、下拉選擇框、單選框、復(fù)選框、文本域、按鈕等。接下來通過本文給大家介紹Bootstrap表單組件教程，感興趣的朋友一起學(xué)習(xí)吧2016-04-04
JavaScript+CSS實現(xiàn)仿Mootools豎排彈性動畫菜單效果
這篇文章主要介紹了JavaScript+CSS實現(xiàn)仿Mootools豎排彈性動畫菜單效果,可實現(xiàn)鼠標(biāo)滑過菜單項呈現(xiàn)彈性移動顯示的效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)手勢圖案鎖屏功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
詳解JavaScript中map()和forEach()的異同
在JavaScript中,map()和forEach()是兩個常用的數(shù)組方法,它們都用于遍歷數(shù)組,但在某些方面有一些關(guān)鍵的區(qū)別,本文將詳細討論這兩種方法的異同,以幫助您更好地理解它們的用法和適用場景,需要的朋友可以參考下2024-02-02
html字符串的連接方法有多種，但效率卻有很大區(qū)別，大家可以感覺需要選擇。2009-09-09
這篇文章主要為大家詳細介紹了javascript異步編程，其實作為一種編程語言Javascript的異步編程是一個非常值得討論的有趣話題，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要介紹了js點擊選擇文本的方法,涉及針對html節(jié)點的操作與選中技巧,非常具有實用價值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了詳解TS對象擴展運算符和rest運算符，對TypeScript感興趣的同學(xué)，可以參考下2021-05-05