微信小程序快速获取到输入框的值
<view class="container"> <view class="main"> <view class="list"> <view class="icon icon1"><image src="../../../images/login01.png"></image></view> <view class="inpuText"> <input data-field="username" bindinput="handleChange" value="{{ values.username }}" type="text" maxlength="8" placeholder="姓名" /> </view> </view> <view class="list"> <view class="icon icon2"><image class="icon2" src="../../../images/login02.png"></image></view> <view class="inpuText"> <input data-field="userphone" bindinput="handleChange" value="{{ values.userphone }}" type="number" maxlength="11" placeholder="手机号码" /> </view> </view> <view class="list"> <view class="icon icon3"><image class="icon3" src="../../../images/login03.png"></image></view> <view class="inpuText seePaw"> <input data-field="password" bindinput="handleChange" value="{{ values.password }}" type="{{passType}}" maxlength="16" placeholder="输入密码" /> <image src="{{iconSee}}" class="See" bindtap="iconSee"></image> </view> </view> <view class="list"> <view class="icon"><image class="icon4" src="../../../images/login04.png"></image></view> <view class="inpuText validation"> <input data-field="code" bindinput="handleChange" value="{{ values.code }}" type="number" maxlength="6" placeholder="验证码" /> <text catchtap="getShortMsg">| {{ time <= 0 ? '获取验证码' : time + 's 后重发' }}</text> </view> </view> <view class="subBtn" bindtap="subBtn">确定</view> <view class="note"><text>免责声明:</text></view> </view> </view>
.container{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; } .main{ width: 560rpx; position: absolute; top: 19.87%; left: 50%; transform: translateX(-50%); height: 500rpx; } .main .list{ width: 100%; height: 100rpx; display: flex; align-items: center; } .main .list .icon{ width: 15%; height: 100rpx; line-height: 100rpx; /* text-align: center; */ } .main .list .icon image{ width: 35rpx; height: 35rpx; } .main .list .icon .icon2,.main .list .icon .icon3{height: 40rpx} .main .list .icon .icon4{width: 40rpx;} .main .list .inpuText{ width: 85%; border-bottom: 1px solid #9fa0a0; } .main .list .inpuText input{ padding-left: 10rpx; color: #979797; width: 80%; } .main .list .validation, .main .list .seePaw{ display: flex; } .See{ width: 50rpx; height: 50rpx; } .main .list .validation text{ display: block; color: #c9caca; } .main .list .validation input{ width: 50%; } .main .subBtn{ width: 100%; height: 80rpx; color: #fff; font-size: 35rpx; letter-spacing: 10rpx; font-weight: bold; background: #fdd000; line-height: 80rpx; text-align: center; margin-top: 60rpx; border-radius: 10rpx; } .main .note{ font-size: 20rpx; color: #595757; line-height: 35rpx; padding-top: 30rpx; } .main .note text{ font-weight: bold; }
// pages/loginInfo/registe/registe.js Page({ /** * 页面的初始数据 */ data: { values:{}, time:"0", passType: "password", iconSee: "../../../images/icon-see.png" }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { }, // 验证码获取 getShortMsg(e) { if (this.data.time <= 0) { this.startTimer(); } }, startTimer() { this.setData({ time: 60 }, () => { this.timer = setInterval(() => { if (this.data.time > 0) { this.setData({ time: this.data.time - 1 }) } else { clearInterval(this.timer) } }, 1000) }) }, // 查看密码 iconSee: function (e) { if (this.data.passType == "password") { this.setData({ iconSee: "../../../images/icon-seepass.png", passType: "text" }) } else { this.setData({ passType: "password", iconSee: "../../../images/icon-see.png" }) } }, // 信息提交 handleChange(e) { const field = e.currentTarget.dataset.field; let values = { ...this.data.values }; values[field] = e.detail.value; this.setData({ values }); }, subBtn() { const { username,password, userphone,code } = this.data.values; console.log(username, password, userphone, code) if (!username) { wx.showToast({ title: '请输入姓名', icon: "none" }) return false; } if (!userphone) { wx.showToast({ title: '请输入手机号', icon: "none" }) return false; } if (!(/^(1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8})$/.test(userphone))) { wx.showToast({ title: '手机号不正确', icon: "none" }) return false } if (!password) { wx.showToast({ title: '请输入密码', icon: "none" }) return false; } if (!code) { wx.showToast({ title: '请输入验证码', icon: "none" }) return false; } wx.navigateTo({ url: '../login/login' }) // http.post('/api', { // ...this.data.values // }).then(res => { // if (res.code == 1) { // wx.navigateBack(); // } // }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function(e) { }, /** * 生命周期函数--监听页面显示 */ onShow: function() { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function() { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function() { }, /** * 用户点击右上角分享 */ onShareAppMessage: function() { } })