您好,登錄后才能下訂單哦!
這篇文章主要介紹了微信小程序中form表單提交和取值的示例分析,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
微信小程序中form 表單提交和取值
我們知道,如果我們直接給 input 添加 bindinput,比如:<input bindinput="onUsernameInput" />,那么可以在 onUsernameInput 中直接使用 e.detail.value,即:
onUsernameInput : function(e) { e.detail.value; }
但是,如果有多個(gè)輸入控件,我們不可能為每個(gè)控件添加 bindinput、bindchange 這類方法來獲取值。我們得這樣做:
第一步、添加 from 控件,并為其指定 bindsubmit 屬性值。
第二步、添加輸入控件到 form 中,并為其指定 name 屬性值。
第三步、添加 button 控件,并為其指定 form-type="submit"。
第四步、在 js 中取值時(shí),用 e.detail.value.xxx 或 e.detail.value["xxx"],其中 xxx 為 name 屬性值。
.wxml 代碼
<form bindsubmit="reg"> <view>用戶:<input type="text" name="username" /></view> <view>密碼:<input password name="password" /></view> <view>興趣:<checkbox-group name="cb"> <label><checkbox value="A" />乒乓球</label> <label><checkbox value="B" checked="false" />羽毛球</label> <label><checkbox value="C" checked="{{checked}}" />排球</label> </checkbox-group></view> <view>級(jí)別:<radio-group name="r"> <label><radio value="a" />初級(jí)</label> <label><radio value="b" />中級(jí)</label> <label><radio value="c" />高級(jí)</label> </radio-group></view> <view><button type="primary" form-type="submit">注冊(cè)</button></view> </form>
.js 代碼
reg: function(e) { console.log(e.detail.value); wx.showToast({ title: e.detail.value["cb"].join(","), icon: "success", duration: 2000 }); }
重要說明
<input type="text" 中的 type 和 HTML 中的不同,
微信小程序的 input 有個(gè)屬性叫 type,這個(gè) type 有幾個(gè)可選值:
text:不必解釋
number:數(shù)字鍵盤(無小數(shù)點(diǎn))
idcard:數(shù)字鍵盤(無小數(shù)點(diǎn)、有個(gè) X 鍵)
digit:數(shù)字鍵盤(有小數(shù)點(diǎn))
注意:number 是無小數(shù)點(diǎn)的,digit 是有小數(shù)點(diǎn)的。我嚴(yán)重懷疑這是個(gè) BUG。
<input password /> 表示密碼框(個(gè)人認(rèn)為太怪異,不如直接叫 password 標(biāo)簽的好)。
“羽毛球”那一項(xiàng),我們是故意寫作 checked="false" 的,我們?cè)噲D使之初始不選中,但是不如我們?cè)?,它卻選中了,這和 HTML 一樣,并不認(rèn) checked 屬性值,只認(rèn)有沒有這個(gè)標(biāo)記。不過如果我們使用 {{}} 則不一樣,比如“排球”一項(xiàng),選中與否就受 data.checked 的影響。
input 的取值如前面所述,用 e.detail.value.xxx 或 e.detail.value["xxx"],其中 xxx 為 name 屬性。
checkbox 的取值也是類似 input,不過 xxx 為 checkbox-group 的 name,取出來的值是數(shù)組,由選中項(xiàng)的 value 組成,比如選中了“乒乓球”、“排球”,結(jié)果就是:["1", "3"]。特別說明,這個(gè)順序與我們選擇的先后有關(guān),比如我們先選擇“排球”,再選擇“乒乓球”,結(jié)果就是["3", "1"]。
radio 的取值和 input 一樣,返回的是選中的那一項(xiàng)的 value,沒有選中項(xiàng)就是 ""。
如果不知道值類型,也可用 console.log(e.detail.value); 將所有值輸出來,然后在調(diào)試 Console 中觀察值,再來取。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“微信小程序中form表單提交和取值的示例分析”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。