html代码
<form bindsubmit="formSubmit" bindreset="formReset"> <view> <view>是否公开信息</view> <switch /> </view> <view> <view>手机号</view> <input placeholder="手机号" /> </view> <view> <view>密码</view> <input placeholder="密码" password/> </view> <view> <view>性别</view> <radio-group> <label> <radio value="男" checked/>男</label> <label> <radio value="女" />女</label> </radio-group> </view> <view> <button formType="submit">提交</button> <button formType="reset">重置</button> </view> </form> <view wx:if="{{isSubmit}}"> {{warn ? warn : "是否公开信息："+isPub+"，手机号："+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发生了submit事件，携带数据为：', e.detail.value); let { phone, pwd, isPub, sex } = e.detail.value; if (!phone || !pwd) { this.setData({ warn: "手机号或密码为空！", isSubmit: true }) return; } this.setData({ warn: "", isSubmit: true, phone, pwd, isPub, sex }) }, formReset: function () { console.log('form发生了reset事件') } })
以上所述是小编给大家介绍的微信小程序-form表单提交详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: