问题描述
当设计好登录界面后,如何在后台对用户输入的手机号位数进行验证,使输入框不止是起到装饰作用呢?
解决方案
登录界面的美化仅在视图层达到要求,而判断手机号的位数需要对用户输入的数据进行处理,即在逻辑层起到作用,才能使登录框不仅只是输入信息,还能产生反馈。
在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
实习编辑 | 王楠岚
责 编 | 赵 微