本文章向大家介紹微信小程序快速獲取到輸入框的值，主要包括微信小程序快速獲取到輸入框的值使用實例、應用技巧、基本知識點總結和需要注意事項，具有一定的參考價值，需要的朋友可以參考一下。
<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.jsPage({ /**
* 頁面的初始數據 */
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() {
}
})