微信小程序|验证手机号位数
问题描述
当设计好登录界面后，如何在后台对用户输入的手机号位数进行验证，使输入框不止是起到装饰作用呢？
解决方案
登录界面的美化仅在视图层达到要求，而判断手机号的位数需要对用户输入的数据进行处理，即在逻辑层起到作用，才能使登录框不仅只是输入信息，还能产生反馈。
在js处理逻辑，示例代码：
// pages/login/login.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
phone_number:'',
code:''
},
/**
* 组件的方法列表
*/
methods: {
getPhone:function(e){
this.setData({
phone_number:e.detail.value
})
if(this.data.phone_number.length != 11 ){
wx.showToast({
title: '手机号输入错误',
})
return;
}
console.log(this.data.phone_number)
},
getCode:function(e){
this.setData({
code:e.detail.value
})
console.log(this.data.code)
},
login:function(){
wx.request({
url: 'http://www.hengyishun.cn/login/login',
data:({
phone:this.data.phone_number,
code:this.data.code
})
,
success(res){
console.log(res.data);
}
})
}
}
})其中，在js申明变量phone_number和code，变量与变量用逗号隔开。
第一步：获取手机号码和验证码
在组件的方法列表写方法（以前的开发者工具版本可以直接写在变量后面，新版本有专门的组件方法列表），示例代码：
getPhone:function(e){
console.log(e.detail.value)
},
第二步：将获取的值赋值给变量。示例代码：
this.setData({
phone_number:e.detail.value
})冒号为相等的意思。
相应的打印变量也要更改，示例代码：
this.data.phone_number细节——判断电话号码位数，示例代码：
if(this.data.phone_number.length != 11 ){
wx.showToast({
title: '手机号输入错误',
})
return;注意!=为一个整体，前后用空格分开。
图3.1 检验手机号位数效果图
处理代码时要注意细节，这会节省查错的时间。
END
实习编辑 | 王楠岚
责 编 | 赵 微
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-07-05，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读