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

本篇文章主要以两个页面为例，介绍了小程序的表单验证的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>