微信小程序判斷手機(jī)號(hào)是否合法的實(shí)例代碼
更新時(shí)間：2021年09月18日 10:35:15 作者：喵喵喵喵要抱抱
我們?cè)谖⑿判〕绦蜷_發(fā)的時(shí)候,手機(jī)號(hào)的驗(yàn)證是經(jīng)常需要操作的,那么如何驗(yàn)證手機(jī)號(hào)呢?這篇文章主要給大家介紹了關(guān)于微信小程序判斷手機(jī)號(hào)是否合法的相關(guān)資料,需要的朋友可以參考下
場(chǎng)景
在注冊(cè)頁面輸入手機(jī)號(hào)，在請(qǐng)求注冊(cè)接口前先行判別輸入的手機(jī)號(hào)碼是否合法；
效果
代碼
導(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">注冊(cè)</text>
</view>
<van-cell-group class="input">
<van-field label="學(xué)號(hào)" value="{{ studentNumber }}" placeholder="請(qǐng)輸入學(xué)號(hào)" required clearable center bind:blur="setStudentNumber" />
<van-field label="用戶名" value="{{ userName }}" placeholder="請(qǐng)輸入用戶名" required clearable center bind:blur="setUsername" />
<van-field label="班級(jí)" value="{{ className }}" placeholder="請(qǐng)輸入所在班級(jí)" required clearable center bind:blur="setClassName" />
<van-field label="手機(jī)號(hào)" value="{{ phoneNumber }}" placeholder="請(qǐng)輸入手機(jī)號(hào)" 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="請(qǐng)輸入密碼" required clearable center type="password" bind:blur="setPassword" />
<van-field label="確認(rèn)密碼" value="{{ repassword }}" placeholder="請(qǐng)?jiān)俅屋斎朊艽a" 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">注冊(cè)</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;
}
}
}
判斷手機(jī)號(hào)是否合法
/**
* 輸入手機(jī)號(hào)
*/
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: '手機(jī)長度有誤'
})
} else if (this.data.phoneNumber.length !== 0 && !regex .test(this.data.phoneNumber)) {
this.setData({
phoneFormat: true,
phoneError: '手機(jī)號(hào)有誤'
})
}
},
完整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: '請(qǐng)選擇性別', value: 0 },
{ text: '男', value: 1 },
{ text: '女', value: 2 }
],
area: 0,
option2: [
{ text: '請(qǐng)選擇所在校區(qū)', value: 0 },
{ text: '北校區(qū)', value: 1 },
{ text: '南校區(qū)', value: 2 }
],
// 錯(cuò)誤提示
rePwdEqual: false,
phoneLength: false,
phoneFormat: false
},
/**
* 輸入學(xué)號(hào)
*/
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
})
},
/**
* 輸入所在班級(jí)
*/
setClassName: function (event) {
// console.log('username', event.detail.value)
this.setData({
className: event.detail.value
})
},
/**
* 輸入手機(jī)號(hào)
*/
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: '手機(jī)長度有誤'
})
} else if (this.data.phoneNumber.length !== 0 && !myReg.test(this.data.phoneNumber)) {
this.setData({
phoneFormat: true,
phoneError: '手機(jī)號(hào)有誤'
})
}
},
/**
* 修改性別
* @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: '請(qǐng)選擇性別', // 提示的內(nèi)容
duration: 2000, // 延遲時(shí)間
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ǐng)選擇所在校區(qū)', // 提示的內(nèi)容
duration: 2000, // 延遲時(shí)間
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: '兩次輸入的密碼不一致'
})
}
},
/**
* 進(jìn)入登錄界面
*/
gotoLogin: function () {
// 當(dāng)前要跳轉(zhuǎn)到另一個(gè)界面，但是會(huì)保留現(xiàn)有界面
wx.redirectTo({
url: '../user-login/user-login'
})
},
/**
* 請(qǐng)求注冊(cè)
*/
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ò)請(qǐ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: '注冊(cè)成功！',
icon: 'success'
})
wx.redirectTo({
url: '/pages/user-login/user-login'
})
} else {
wx.showToast({
title: '注冊(cè)失??！',
icon: 'none'
})
console.log('注冊(cè)失敗！')
console.log(res)
}
},
fail(msg) {
console.log(msg)
}
})
}
} else if (!existStudentNumber) {
wx.showToast({
title: '學(xué)號(hào)不能為空！',
icon: 'none'
})
} else if (!existUserName) {
wx.showToast({
title: '用戶名不能為空！',
icon: 'none'
})
} else if (!existClassName) {
wx.showToast({
title: '班級(jí)不能為空！',
icon: 'none'
})
} else if (!existPhoneNumber) {
wx.showToast({
title: '手機(jī)號(hào)不能為空！',
icon: 'none'
})
} else if (!existGender) {
wx.showToast({
title: '請(qǐng)選擇性別！',
icon: 'none'
})
} else if (!existArea) {
wx.showToast({
title: '請(qǐng)選擇所在校區(qū)！',
icon: 'none'
})
} else {
wx.showToast({
title: '請(qǐng)按提示輸入相關(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)聽用戶下拉動(dòng)作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
},
/**
* 用戶點(diǎn)擊右上角分享
*/
onShareAppMessage: function () {
}
})
總結(jié)
到此這篇關(guān)于微信小程序判斷手機(jī)號(hào)是否合法的文章就介紹到這了,更多相關(guān)微信小程序判斷手機(jī)號(hào)合法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
JavaScript反彈動(dòng)畫效果的實(shí)現(xiàn)代碼
本文通過實(shí)例代碼給大家介紹了js反彈動(dòng)畫效果的實(shí)現(xiàn)代碼，需要的朋友參考下吧2017-07-07
TypeScript中的映射類型和數(shù)學(xué)中的映射類似,能夠?qū)⒁粋€(gè)集合的元素轉(zhuǎn)換為新集合的元素,本文就來介紹一下TypeScript中類型映射的使用,感興趣的可以了解一下2023-10-10
本文主要介紹了代碼優(yōu)化頁面加載速度的方法。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-03-03
本文將介紹Javascript模式中較為常見和實(shí)用的模式——單例模式，主要分為概念和實(shí)例部分。在介紹實(shí)例的同時(shí)也會(huì)對(duì)代碼中額外的知識(shí)點(diǎn)進(jìn)行講解。需要的朋友可以看下2016-12-12
讓html元素隨瀏覽器的大小自適應(yīng)垂直居中的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄宧tml元素隨瀏覽器的大小自適應(yīng)垂直居中的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
基于JavaScript或jQuery實(shí)現(xiàn)網(wǎng)站夜間/高亮模式
這篇文章主要介紹了基于JavaScript或jQuery實(shí)現(xiàn)網(wǎng)站夜間/高亮模式,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了小程序中的箭頭函數(shù)的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
js實(shí)例入門(簡(jiǎn)單展開或關(guān)閉)
簡(jiǎn)直的展開或關(guān)閉2008-11-11
這篇文章主要為大家介紹了JS利用中介模式開發(fā)全局控制器圖文示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
這篇文章主要介紹了微信小程序如何訪問公眾號(hào)文章，隨著小程序不斷的發(fā)展，現(xiàn)在個(gè)人的小程序也開放了很多功能了，個(gè)人小程序直接打開公眾號(hào)鏈接。在群里看到的一款小程序，點(diǎn)擊可以直接閱讀文章了,需要的朋友可以參考下2019-07-07