问题描述
当设计好登录界面后，如何在后台对用户输入的手机号位数进行验证，使输入框不止是起到装饰作用呢？
解决方案
登录界面的美化仅在视图层达到要求，而判断手机号的位数需要对用户输入的数据进行处理，即在逻辑层起到作用，才能使登录框不仅只是输入信息，还能产生反馈。
在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 检验手机号位数效果图
处理代码时要注意细节，这会节省查错的时间。
