效果
html代码
<form bindsubmit="formsubmit" bindreset="formreset"> <view class="section section_gap"> <view class="section__title">是否公开信息</view> <switch name="ispub" /> </view> <view class="section"> <view class="section__title">手机号</view> <input name="phone" placeholder="手机号" /> </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 : "是否公开信息:"+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表单提交详解整合,希望对大家有所帮助
如对本文有疑问, 点击进行留言回复!!
asp.net中ajax和一般处理程序(handler.ashx)的交互
egg.js创建项目,目录介绍,简单使用,sequelize mysql使用
网友评论