這篇文章主要展示兩種表格輸入框的輸入獲取，主要對于項目中用戶信息填寫，登錄注冊這樣的情況
1.使用input的bindinput屬性來動態獲取對應輸入框值的變化
優點：比較靈活，隨時獲取值變化
2.使用form表單的形式在提交時獲取數據
優點：代碼量少
以登錄賬號密碼為例子
一、input的方式
tips:input通過屬性type（passWord）可以控制星號的隱藏效果
布局代碼
<input class="num" placeholder="用戶名/郵箱/手機號" placeholder-style="color:#999999" bindinput="accountInput">
</input>
<input class="num" placeholder="請輸入密碼" placeholder-style="color:#999999" bindinput="passwordInput"></input>
<button class="btn_login" type="default" disabled="{{disable}}" bindtap="login"> 登錄</button>
js代碼
//更新賬戶輸入
accountInput:function(e){
var content=e.detail.value;
console.log(content);
this.setData({
account:content
})
},
//更新密碼輸入
passwordInput:function(e){
var content=e.detail.value;
console.log(content);
this.setData({
password:content
})
},
//提交操作
login:function(){
var self=this;
console.log(self.data.account+"--"+self.data.password)
},
輸入數據的時候實時更新數據，提交的時候檢驗數據
二、使用form表單的形式
頁面代碼
<view class="form-box">
<form bindsubmit="formSubmit">
<input name="name" placeholder="用戶名/郵箱、手機"></input>
<input name="password" placeholder="密碼"></input>
<button class="view-button" form-type="submit" bindtap="formSubmit">保存</button>
</form>
</view>
js代碼
//提交表單
formSubmit:function(e){
//獲取表單中輸入框數據
var value = e.detail.value;
//value.name 對應賬號輸入框 value.password對應密碼輸入框
if(value.name&&value.password){
wx.setStorage({
key: 'address',
data: value,
success(){
wx.navigateBack();
}
})
} else{
wx.showModal({
title: '提示',
content: '請填寫完整資料',
showCancel:false
})
}
},
