微信小程序表单验证及页面之间参数传递

本篇文章主要以两个页面为例，介绍了小程序的表单验证的js代码和如何将一个页面中获取到用户的数据传入下一个页面,纯个人手写，不好之处希望大家指正。

首先给大家展示的是表单验证的效果，主要是通过弹框来显示：

           

当必要信息没有填写完整的时候，页面不能跳转，而且会弹出提示信息，要求完善信息，当必要信息完成后，跳转到第二个页面：

这里的弹框效果运用的是微信中的wx.showModal方法实现的，具体使用请参考https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html#wxshowmodalobject中的API文档。对于何时弹框，弹框的顺序，需要一个if ,else逻辑语句进行判断，下面贴出的是点击按钮之后的事件，主要写的是点击按钮后对表单进行验证，并带参数传值。

[javascript]  view plain  copy

1. formSubmit: function(e) {  
2.   var warn = "";//弹框时提示的内容  
3.   var flag = true;//判断信息输入是否完整  
4.   //判断的顺序依次是：姓名-手机号-地址-具体地址-预约日期-预约时间-开荒面积  
5.   if(e.detail.value.name==""){  
6.     warn = "请填写您的姓名！";  
7.   }else if(e.detail.value.tel==""){  
8.     warn = "请填写您的手机号！";  
9.   }else if(!(/^1(3|4|5|7|8)\d{9}$/.test(e.detail.value.tel))){  
10.     warn = "手机号格式不正确";  
11.   }else if(e.detail.value.addre=='0'){  
12.     warn = "请选择您的地址"  
13.   }else if(e.detail.value.door==""){  
14.     warn = "请输入您的具体地址";  
15.   }else if(e.detail.value.date=='　预约日期'){  
16.     warn = "请选择预约日期";  
17.   }else if(e.detail.value.time=='　时间'){  
18.     warn = "请选择预约时间";  
19.   }else if(e.detail.value.area==''){  
20.     warn = "请输入您的开荒面积";  
21.   }else{  
22.      flag=false;//若必要信息都填写，则不用弹框，且页面可以进行跳转  
23.      var that = this;  
24.      //？后面跟的是需要传递到下一个页面的参数  
25.      wx.navigateTo({  
26.       url: '../confirmForest/confirmForest?area='+e.detail.value.area+'&tel='+e.detail.value.tel+"&addre="+that.data.addreRange[e.detail.value.addre]+"&door="+e.detail.value.door  
27.       })   
28.      console.log('form发生了submit事件，携带数据为：', e.detail.value);  
29.   }  
30.   //如果信息填写不完整，弹出输入框  
31.   if(flag==true){  
32.     wx.showModal({  
33.     title: '提示',  
34.     content:warn  
35.   })  
36. }  
37. }  

跳转后的页面，显示前一个页面的电话地址等信息

第二个页面会将第一个页面中的联系电话，地址等参数取到并显示到当前页面，这里就存在着一个参数传递的问题。

这里第二个页面通过以下方式取得前一个页面的数据：

[javascript]  view plain  copy

1. onLoad: function(options) {  
2.    this.setData({   
3.      tel:options.tel,  
4.      addre:options.addre+options.door,  
5.      date:options.date,  
6.      time:options.time  
7.    })  
8.  },  

以上是这两个页面上的核心代码，下面是完整的代码：

第一个页面的wxml

[html]  view plain  copy

1. <view class="section">  
2. <form bindsubmit="formSubmit" report-submit="true">  
3. <view class="item-title">  
4. <text>联系人</text>  
5. </view>  
6. <!-- 联系人部分开始 -->  
7. <view class="info">  
8. <!-- 姓名部分 -->  
9. <view class="item">  
10. <text>姓名：</text>  
11. <input type="text" name="name" placeholder="{{name}}" focus="{{focus}}">  
12. </view>  
13. <!-- 性别部分 -->  
14. <view class="item sex">  
15. <radio-group name="sex" class="radio-group" bindchange="radioChange">  
16.   <label class="radio" wx:for="{{sexs}}">  
17.     <radio value="{{item.name}}" color="#FFC800" checked="{{item.checked}}">{{item.value}}  
18.   </radio></label>  
19. </radio-group>  
20. </view>  
21.   
22. <!-- 电话部分 -->  
23. <view class="item">  
24. <text>手机：</text>  
25. <input name="tel" type="number" placeholder="{{tel}}" focus="{{focus}}">  
26. </view>  
27.   
28.   
29. </view>  
30. <!-- 联系人部分结束 -->  
31. <view class="item-title">  
32. <text>服务地址</text>  
33. </view>  
34. <!-- 服务地址部分开始 -->  
35. <view class="info">  
36. <!-- 地址部分 -->  
37. <view class="item">  
38. <text>地址：</text>  
39. <picker name="addre" class="addre" value="{{addreValue}}" range="{{addreRange}}" bindchange="addrePickerBindchange">  
40.  {{addreRange[addreValue]}}  
41. </picker>  
42.   
43. </view>  
44. <!-- 门牌部分 -->  
45. <view class="item">  
46. <text>门牌号：</text>  
47. <input name="door" type="text" placeholder="{{door}}" focus="{{focus}}">  
48. </view>  
49. <!-- 日期部分 -->  
50. <view class="item">  
51. <text>预约日期：</text>  
52. <picker name="date" mode="date" value="{{dateValue}}" start="2017-05-19" end="2100-12-12" bindchange="datePickerBindchange">  
53.     {{dateValue}}  
54. </picker>  
55. 　|　  
56. <picker name="time" mode="time" value="{{timeValue}}" start="08:00" end="18:00" bindchange="timePickerBindchange">  
57.   {{timeValue}}  
58. </picker>  
59. </view>  
60.   
61. </view>  
62. <!-- 服务地址部分结束 -->  
63. <view class="item-title">  
64. <text>详情</text>  
65. </view>  
66. <!-- 服务要求部分开始 -->  
67. <view class="info">  
68. <!-- 面积部分 -->  
69. <view class="item">  
70. <text>房屋面积：</text>  
71. <picker name="area" class="area" value="{{areaValue}}" range="{{areaRange}}" bindchange="areaPickerBindchange">  
72.  {{areaRange[areaValue]}}  
73. </picker>  
74. <text>㎡</text>  
75. <text class="remind">(以便自动计算保洁时间和服务人数)</text>  
76. </view>  
77.   
78. <!--备注部分-->  
79. <view class="item">  
80. <checkbox-group bindchange="checkboxChange" name="marks">  
81.   <label class="checkbox" wx:for="{{marks}}">  
82.     <checkbox value="{{item.name}}" checked="{{item.checked}}" color="#FFC800">{{item.value}}  
83.   </checkbox></label>  
84. </checkbox-group>  
85. </view>  
86. <!-- 备注部分 -->  
87. <view class="item">  
88. <text>备注：</text>  
89. <input name="comment" type="text" placeholder="{{comment}}" focus="{{focus}}">  
90. </view>  
91.   
92.   
93. </view>  
94. <view class="sign"><input name="sign" type="text" value="{{sign}}"></view>  
95. <!-- 详情部分结束 -->  
96.         <button class="submit" bindtap="btnSubmit" formtype="submit">立即预约</button>  
97.   </form>  
98. </view>  

第一个页面的js

[javascript]  view plain  copy

1. Page({  
2.   data:{  
3.     // text:"这是一个页面"  
4.     name:'请填写您的姓名',  
5.     tel:'请填写您的手机号',  
6.     addreValue:0,  
7.     addreRange:['　　　　　　　　','长沙市芙蓉区','长沙市天心区','长沙市雨花区','长沙市开福区','长沙市岳麓区'],  
8.     door:'例如：xx小区x单元xxx室',  
9.     dateValue:'　预约日期',  
10.     timeValue:'　时间',  
11.     price:'7',  
12.      sexs: [  
13.       {name: 'man', value: '男士　　',checked: 'true'},  
14.       {name: 'woman', value: '女士' }  
15.     ],  
16.     sign:Date.now()+'0'+Math.ceil(Math.random()*10000)   
17.   },  
18.   
19.    onLoad: function(options) {      
20.     this.setData({      
21.       keywords: options.keywords    
22.     })  
23.   } ,  
24.       
25.   addrePickerBindchange:function(e){  
26.     this.setData({  
27.       addreValue:e.detail.value  
28.     })  
29.   },  
30.   areaPickerBindchange:function(e){  
31.     this.setData({  
32.       areaValue:e.detail.value  
33.     })  
34.   },  
35.   timePickerBindchange:function(e){  
36.     this.setData({  
37.       timeValue:e.detail.value  
38.     })  
39.   },  
40.   datePickerBindchange:function(e){  
41.     this.setData({  
42.       dateValue:e.detail.value  
43.     })  
44.   },  
45.   formSubmit: function(e) {  
46.     var warn = "";//弹框时提示的内容  
47.     var flag = true;//判断信息输入是否完整  
48.     //判断的顺序依次是：姓名-手机号-地址-具体地址-预约日期-预约时间-开荒面积  
49.     if(e.detail.value.name==""){  
50.       warn = "请填写您的姓名！";  
51.     }else if(e.detail.value.tel==""){  
52.       warn = "请填写您的手机号！";  
53.     }else if(!(/^1(3|4|5|7|8)\d{9}$/.test(e.detail.value.tel))){  
54.       warn = "手机号格式不正确";  
55.     }else if(e.detail.value.addre=='0'){  
56.       warn = "请选择您的地址"  
57.     }else if(e.detail.value.door==""){  
58.       warn = "请输入您的具体地址";  
59.     }else if(e.detail.value.date=='　预约日期'){  
60.       warn = "请选择预约日期";  
61.     }else if(e.detail.value.time=='　时间'){  
62.       warn = "请选择预约时间";  
63.     }else if(e.detail.value.area==''){  
64.       warn = "请输入您的开荒面积";  
65.     }else{  
66.        flag=false;//若必要信息都填写，则不用弹框，且页面可以进行跳转  
67.        var that = this;  
68.        //？后面跟的是需要传递到下一个页面的参数  
69.        wx.navigateTo({  
70.         url: '../confirmForest/confirmForest?area='+e.detail.value.area+'&tel='+e.detail.value.tel+"&addre="+that.data.addreRange[e.detail.value.addre]+"&door="+e.detail.value.door  
71.         })   
72.        console.log('form发生了submit事件，携带数据为：', e.detail.value);  
73.     }  
74.     //如果信息填写不完整，弹出输入框  
75.     if(flag==true){  
76.       wx.showModal({  
77.       title: '提示',  
78.       content:warn  
79.     })  
80.   }  
81.   }  
82.    
83.   
84.   
85. })  

第一个页面的wxss

[plain]  view plain  copy

1. page {    
2.   display: block;    
3.   min-height: 100%;    
4.   background-color:#f6f6f6;  
5.   font-family: "微软雅黑";  
6.   font-size: 30rpx;  
7.   color:#353535;  
8.   position: relative;  
9. }   
10. .section text{  
11.     padding-left:25rpx;  
12. }  
13. .info{  
14.     background-color: #fff;  
15. }  
16. .item{  
17.     height:90rpx;  
18.     align-items: center;  
19.     display:flex;  
20.     flex-direction: row;  
21.     border:1rpx solid #eee;  
22. }  
23.   
24. .item input{  
25.     padding-left:5rpx;  
26.     font-family: "微软雅黑";  
27. }  
28. .item-title{  
29.     height:60rpx;  
30.     line-height:80rpx;  
31. }  
32. .area{  
33.     width:20%;  
34. }  
35. .remind{  
36.     color:#e64340;  
37.     font-size:20rpx;  
38. }  
39. .submit{  
40.     position: absolute;  
41.     background-color:#FFC800;  
42.     bottom: 0;  
43.     width:100%;  
44. }  
45.   
46. .addre{  
47.     /*color:#939393;*/  
48.     width:400rpx;  
49. }  
50. .area{  
51.     width:150rpx;  
52.     border:1rpx solid #939393;  
53. }  
54. .text_box{  
55.     padding-left:100rpx;  
56. }  
57. .map{  
58.     width:550rpx;  
59.     color:#939393;  
60. }  
61. .more{  
62.     color:#939393;  
63.     padding-left:30rpx;  
64.     float:right;  
65. }  
66. .sex{  
67.     padding-left:120rpx;  
68. }  
69. .checkbox{  
70.     padding-left:25rpx;  
71. }  
72.   
73. .sign{  
74.     display: none;  
75.     float:left;  
76. }  
77. input{  
78.     width:75%;  
79. }  

第二个页面的wxml

[html]  view plain  copy

1. <view class="container">  
2. <!-- 订单详情开始 -->  
3. <view class="section">  
4. <view class="title">  
5. <text>订单详情</text>  
6. </view>  
7. <view class="info">  
8. <view class="item">  
9. <text>服务项目：</text><text>{{project}}</text>  
10. </view>  
11. <view class="item">  
12. <text>联系电话：</text><text>{{tel}}</text>  
13. </view>  
14. <view class="item">  
15. <text>服务地址：</text><text>{{addre}}</text>  
16. </view>  
17. </view>  
18. </view>  
19. <!-- 订单详情结束 -->  
20. <!-- 服务详情开始 -->  
21. <view class="section">  
22. <view class="title">  
23. <text>服务详情</text>  
24. </view>  
25. <view class="info">  
26.   
27. <view class="item item2 ">  
28. <view class="time">  
29. <text>{{date}}号 {{time}}</text>  
30. </view>  
31. <view class="choose">   
32. <img class="sub1" src="{{sub}}" mode="widthFix" bindtap="subTime">  
33. {{timeNum}}<img src="{{add}}" mode="widthFix" bindtap="addTime">  
34. <text> 小时</text>  
35. </view>  
36. </view>  
37.   
38. <view class="item item2">  
39. <text>阿姨人数：</text>  
40. <view class="choose">   
41. <img class="sub1" src="{{sub}}" mode="widthFix" bindtap="subPerson">  
42. {{personNum}}<img src="{{add}}" mode="widthFix" bindtap="addPerson">  
43. <text> 位</text>  
44. </view>  
45. </view>  
46.   
47. </view>  
48. </view>  
49. <!-- 服务详情结束 -->  
50. <!-- 支付方式开始 -->  
51. <view class="section">  
52. <view class="title">  
53. <text>支付方式</text>  
54. </view>  
55. <view class="info">  
56. <view class="item item3">  
57. <text>微信支付：</text><icon type="success" size="25">  
58. </icon></view>  
59. </view>  
60. </view>  
61. <!-- 支付方式结束 -->  
62. <!-- 底部部分开始 -->  
63. <view class="confirm">  
64.       
65.     <view class="text2"><text>待支付</text><text class="red">¥{{pay}}</text></view>  
66.     <navigator url="../payDetail/payDetail">  
67.     <view class="text3" bindtap="confirmPay">确认支付</view>  
68.     </navigator>  
69. </view>  
70. <!-- 底部部分结束 -->  
71. </view>  

第二个页面的js

[javascript]  view plain  copy

1. Page({  
2.   data:{  
3.     project:'家庭保洁',  
4.     sub:'../../images/sub.png',  
5.     add:'../../images/add.png',  
6.     timeNum:'3',  
7.     personNum:'1',  
8.     pay:'85'  
9.   },  
10.   onLoad: function(options) {  
11.     this.setData({   
12.       tel:options.tel,  
13.       addre:options.addre+options.door,  
14.       date:options.date,  
15.       time:options.time  
16.     })  
17.   },  
18.   addTime:function(e){  
19.     var time = ++this.data.timeNum;  
20.     this.setData({  
21.       timeNum : time  
22.     });  
23.   
24.   },  
25.    subTime:function(e){  
26.     var time = --this.data.timeNum;  
27.     this.setData({  
28.       timeNum : time  
29.     });  
30.   
31.   },  
32.    addPerson:function(e){  
33.     var num = ++this.data.personNum;  
34.     this.setData({  
35.       personNum : num  
36.     })  
37.   
38.   },  
39.    subPerson:function(e){  
40.     var num = --this.data.personNum;  
41.     this.setData({  
42.       personNum : num  
43.     })  
44.   
45.   },  
46.   
47.   confirmPay:function(){  
48.     console.log(this.data)  
49.   }  
50. })  

第二个页面的wxss

[plain]  view plain  copy

1. page {    
2.   display: block;    
3.   min-height: 100%;    
4.   background-color:#f6f6f6;      
5.   font-family: "微软雅黑";  
6.   font-size: 30rpx;  
7.   color:#353535;  
8.   position: relative;  
9. }   
10. .section{  
11.     background-color: #fff;  
12.     margin-top:50rpx;  
13.     padding:30rpx;  
14. }  
15.   
16.   
17. .title{  
18.     border-bottom:2rpx solid #eee;  
19.     height:50rpx;  
20.     line-height: 50rpx;  
21.     font-size: 27rpx;  
22.     margin-bottom: 10rpx;  
23. }  
24. .item{  
25.     height:60rpx;  
26.     line-height: 60rpx;  
27. }  
28. .item2{  
29.     margin:10rpx 0 ;  
30.     align-items: center;  
31.     line-height: 60rpx;  
32. }  
33.   
34. .time{float:left;}  
35. .item2 .choose{  
36.     float:right;  
37.     display:flex;  
38.     width:300rpx;  
39.   
40. }  
41. .item2 image{  
42.   width:50rpx;  
43.   margin:0 10rpx;  
44. }  
45.   
46.   
47. .item3{  
48.     font-size:35rpx;  
49.     display: flex;  
50.     justify-content: space-between;  
51. }  
52.   
53. .confirm{  
54.     height:100rpx;  
55.     position: absolute;  
56.     bottom: 0;  
57.     width:100%;  
58.     background-color: #fff;  
59.     font-size: 40rpx;  
60. }  
61. .confirm .text1{  
62.     margin-left:20rpx;  
63.     float:left;  
64.     font-size: 35rpx;  
65.     line-height:100rpx;  
66. }  
67. .confirm .text2{  
68.     margin-left:20rpx;  
69.     float:left;  
70.     font-size: 35rpx;  
71.     line-height:100rpx;  
72. }  
73. .text3{  
74.     text-align: center;  
75.     font-weight: bold;  
76.     background-color:#FFC800;  
77.     width:40%;  
78.     float: right;  
79.     line-height: 100rpx;  
80. }  
81. .red{  
82.     color:#e64340;  
83. }