问题描述
当设计好登录界面后,如何在后台对用户输入的手机号位数进行验证,使输入框不止是起到装饰作用呢?
解决方案
登录界面的美化仅在视图层达到要求,而判断手机号的位数需要对用户输入的数据进行处理,即在逻辑层起到作用,才能使登录框不仅只是输入信息,还能产生反馈。
在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
实习编辑 | 王楠岚
责 编 | 赵 微
where2go 团队
微信号:算法与编程之美
长按识别二维码关注我们!
温馨提示:点击页面右下角“写留言”发表评论,期待您的参与!期待您的转发!