相思资源网 Design By www.200059.com
效果
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 "是否公开信息:"+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表单提交详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com
暂无微信小程序-form表单提交代码实例的评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。