這篇文章主要展示兩種表格輸入框的輸入獲取，主要對(duì)于項(xiàng)目中用戶信息填寫，登錄注冊(cè)這樣的情況
1.使用input的bindinput屬性來動(dòng)態(tài)獲取對(duì)應(yīng)輸入框值的變化
優(yōu)點(diǎn)：比較靈活审磁，隨時(shí)獲取值變化
2.使用form表單的形式在提交時(shí)獲取數(shù)據(jù)
優(yōu)點(diǎn)：代碼量少
以登錄賬號(hào)密碼為例子
一购对、input的方式
tips:input通過屬性type（passWord）可以控制星號(hào)的隱藏效果
布局代碼
<input class="num" placeholder="用戶名/郵箱/手機(jī)號(hào)" placeholder-style="color:#999999" bindinput="accountInput">
</input>
<input class="num" placeholder="請(qǐng)輸入密碼" 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)
},
輸入數(shù)據(jù)的時(shí)候?qū)崟r(shí)更新數(shù)據(jù)，提交的時(shí)候檢驗(yàn)數(shù)據(jù)
二觅够、使用form表單的形式
頁面代碼
<view class="form-box">
<form bindsubmit="formSubmit">
<input name="name" placeholder="用戶名/郵箱胶背、手機(jī)"></input>
<input name="password" placeholder="密碼"></input>
<button class="view-button" form-type="submit" bindtap="formSubmit">保存</button>
</form>
</view>
js代碼
//提交表單
formSubmit:function(e){
//獲取表單中輸入框數(shù)據(jù)
var value = e.detail.value;
//value.name 對(duì)應(yīng)賬號(hào)輸入框 value.password對(duì)應(yīng)密碼輸入框
if(value.name&&value.password){
wx.setStorage({
key: 'address',
data: value,
success(){
wx.navigateBack();
}
})
} else{
wx.showModal({
title: '提示',
content: '請(qǐng)?zhí)顚懲暾Y料',
showCancel:false
})
}
},
