小程序极速实战开发《九》form表单

发布：2018-01-25 16:35浏览：次来源：网络作者：tianshu

组件说明:

表单，将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交。

当点击 <form/> 表单中 formType 为 submit 的<button/> 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

组件用法：

重置:<button formType="reset">Reset</button>

提交: <button formType="submit">Submit</button>

wxml

1. <view class="page">
2. <view class="page__hd">
3. <text class="page__title">表单控件</text>
4. </view>
5. <form class="page__bd" catchsubmit="formSubmit" catchreset="formReset">
6. <view class="section">
7. <view class="section__title">您的姓名：</view>
8. <input name="name" placeholder="姓名：" />
9. </view>
10. <view class="section section_gap">
11. <view class="section__title">性别：</view>
12. <radio-group name="gender">
13. <label><radio value="男"/>男</label>
14. <label><radio value="女"/>女</label>
15. <label><radio value="其他"/>其他</label>
16. </radio-group>
17. </view>
18. <view class="section section_gap">
19. <view class="section__title">年龄：</view>
20. <slider value="18" name="age" show-value ></slider>
21. </view>
22. <view class="section section_gap">
23. <view class="section__title">擅长的开发语言：</view>
24. <checkbox-group name="technology">
25. <label><checkbox value="Java"/>Java</label>
26. <label><checkbox value="JavaScript"/>JavaScript</label>
27. <label><checkbox value="C++"/>C++</label>
28. <label><checkbox value="C"/>C</label>
29. <label><checkbox value="Object-C"/>Object-C</label>
30. <label><checkbox value="C#"/>C#</label>
31. <label><checkbox value="Python"/>Python</label>
32. <label><checkbox value="PHP"/>PHP</label>
33. <label><checkbox value="Ruby"/>Ruby</label>
34. <label><checkbox value="Swift"/>Swift</label>
35. </checkbox-group>
36. </view>
37. <view class="section section_gap">
38. <view class="section__title">是否公开信息：</view>
39. <switch name="isPublic"/>
40. </view>
41. <view class="btn-area">
42. <button formType="submit">Submit</button>
43. <button formType="reset">Reset</button>
44. </view>
45. <modal class="modal" hidden="{{modalHidden}}" no-cancel bindconfirm="modalChange">
46. <view> 您填写的表单如下 </view>
47. <view> 姓名:{{name}} </view>
48. <view> 性别：{{gender}} </view>
49. <view> 年龄：{{age}} </view>
50. <view> 擅长的开发语言：{{technology}} </view>
51. <view> 是否公开信息：{{isPublic}} </view>
52. </modal>
53. </form>
54. </view>

Page({
data: {
pickerHidden: true,
chosen: '',
modalHidden: true,
name: '',
gender: '',
age: '',
technology: '',
isPublic: ''
},
formSubmit: function(e) {
var value = e.detail.value;
this.setData(
{
modalHidden: false,
name: value.name,
gender: value.gender,
age: value.age,
technology: value.technology,
isPublic: value.isPublic
}
);
console.log('form发生了submit事件，携带数据为：', e.detail.value)
},
formReset: function(e) {
console.log('form发生了reset事件，携带数据为：', e.detail.value)
this.setData({
chosen: ''
})
},
modalChange: function(e) {
this.setData({
modalHidden: true
})
},
})

wxss

wx-label {
display: block;
margin-top: 10rpx;
margin-left: 15rpx;
}
.section__title{
font-size: 30rpx;
margin-bottom: 30rpx;
font-weight: bold;
}
.page {
min-height: 100%;
flex: 1;
background-color: #FBF9FE;
font-size: 32rpx;
font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
overflow: hidden;
}
.page__hd{
padding: 50rpx 50rpx 100rpx 50rpx;
text-align: center;
}
.page__title{
display: inline-block;
padding: 20rpx 40rpx;
font-size: 32rpx;
color: #AAAAAA;
border-bottom: 1px solid #CCCCCC;
}
.page__desc{
display: none;
margin-top: 20rpx;
font-size: 26rpx;
color: #BBBBBB;
}
.section{
margin-bottom: 80rpx;
}
.section_gap{
padding: 0 30rpx;
}
.section__title{
margin-bottom: 16rpx;
padding-left: 30rpx;
padding-right: 30rpx;
}
.section_gap .section__title{
padding-left: 0;
padding-right: 0;
}
.btn-area{
padding: 0 30px;
}
.btn-area button{
margin-top: 20rpx;
margin-bottom: 20rpx;
}
.page input{
padding: 20rpx 30rpx;
background-color: #fff;
margin-left: 20rpx;
}

主要属性：

属性	类型	说明
report-submit	Boolean	是否返回formId用于发送模板消息
bindsubmit	EventHandle	携带form中的数据触发submit事件，event.detail = {value : {‘name’: ‘value’} , formId: ‘’}

注意：

本案例使用的modal组件即将过期，推荐使用wx.showModal API

将formSubmit方法改写成这样，就可以。目前wx.showModal这个API的content不支持换行，有可能是Bug，期待后续优化。

1. formSubmit: function(e) {
2. var value = e.detail.value;
3. wx.showModal({
4. title: '您填写的表单如下',
5. content: '姓名:'+value.name
6. +'性别：'+value.gender
7. +'年龄：'+value.age
8. +'擅长的开发语言：'+value.technology
9. +'是否公开信息：' + value.isPublic,
10. showCancel: false,
11. success: function(res) {
12. if (res.confirm) {
13. console.log('用户点击确定')
14. }
15. }
16. });
17. },

上一篇：小程序极速实战开发《十》input输入框

下一篇：小程序极速实战开发《八》checkbox多选项

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

微信小程序开发工具常用快捷键2018-06-09
微信小程序架构分析《一》调试技巧，模块构成，理念分析2018-02-07
微信小程序架构分析《二》：view 模块和 service 模块的构成2018-02-07
微信小程序架构分析《三》：实现过程以及实时更新2018-02-07
梁兴臣:微信小程序开发三宗罪和解决方案2018-02-07
微信小程序使用Promise实践2018-02-07
微信小程序开发系列分析《一》视图层2018-02-07
微信小程序开发系列分析《二》数据层2018-02-07
微信小程序官方文档个人分析心得2018-02-07
微信小程序的原型设计尝鲜2018-02-07