您好,登錄后才能下訂單哦!
效果
html代碼
<form bindsubmit="formSubmit" bindreset="formReset"> <view class="section section_gap"> <view class="section__title">是否公開(kāi)信息</view> <switch name="isPub" /> </view> <view class="section"> <view class="section__title">手機(jī)號(hào)</view> <input name="phone" placeholder="手機(jī)號(hào)" /> </view> <view class="section"> <view class="section__title">密碼</view> <input name="pwd" placeholder="密碼" password/> </view> <view class="section section_gap"> <view class="section__title">性別</view> <radio-group name="sex"> <label> <radio value="男" checked/>男</label> <label> <radio value="女" />女</label> </radio-group> </view> <view class="btn-area"> <button formType="submit">提交</button> <button formType="reset">重置</button> </view> </form> <view wx:if="{{isSubmit}}"> {{warn ? warn : "是否公開(kāi)信息:"+isPub+",手機(jī)號(hào):"+phone+",密碼:"+pwd+",性別:"+sex}} </view>
css代碼
.section{ display: flex; flex-direction: row; margin: 20rpx; } .section view{ margin-right: 20rpx; } .btn-area{ margin: 20rpx; } button{ margin: 10rpx 0; }
js代碼
let app = getApp(); Page({ data: { isSubmit: false, warn: "", phone: "", pwd: "", isPub: false, sex: "男" }, formSubmit: function (e) { console.log('form發(fā)生了submit事件,攜帶數(shù)據(jù)為:', e.detail.value); let { phone, pwd, isPub, sex } = e.detail.value; if (!phone || !pwd) { this.setData({ warn: "手機(jī)號(hào)或密碼為空!", isSubmit: true }) return; } this.setData({ warn: "", isSubmit: true, phone, pwd, isPub, sex }) }, formReset: function () { console.log('form發(fā)生了reset事件') } })
以上所述是小編給大家介紹的微信小程序-form表單提交詳解整合,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。