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

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

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

           

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

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

 formSubmit: function(e) {
   var warn = "";//弹框时提示的内容
   var flag = true;//判断信息输入是否完整
   //判断的顺序依次是：姓名-手机号-地址-具体地址-预约日期-预约时间-开荒面积
   if(e.detail.value.name==""){
     warn = "请填写您的姓名！";
   }else if(e.detail.value.tel==""){
     warn = "请填写您的手机号！";
   }else if(!(/^1(3|4|5|7|8)\d{9}$/.test(e.detail.value.tel))){
     warn = "手机号格式不正确";
   }else if(e.detail.value.addre=='0'){
     warn = "请选择您的地址"
   }else if(e.detail.value.door==""){
     warn = "请输入您的具体地址";
   }else if(e.detail.value.date=='　预约日期'){
     warn = "请选择预约日期";
   }else if(e.detail.value.time=='　时间'){
     warn = "请选择预约时间";
   }else if(e.detail.value.area==''){
     warn = "请输入您的开荒面积";
   }else{
      flag=false;//若必要信息都填写，则不用弹框，且页面可以进行跳转
      var that = this;
      //？后面跟的是需要传递到下一个页面的参数
      wx.navigateTo({
       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
       })
      console.log('form发生了submit事件，携带数据为：', e.detail.value);
   }
   //如果信息填写不完整，弹出输入框
   if(flag==true){
     wx.showModal({
     title: '提示',
     content:warn
   })
 }
 }

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

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

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

 onLoad: function(options) {
    this.setData({
      tel:options.tel,
      addre:options.addre+options.door,
      date:options.date,
      time:options.time
    })
  },

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

第一个页面的wxml

 <view class="section">
 <form bindsubmit="formSubmit" report-submit="true">
 <view class="item-title">
 <text>联系人text>
 view>

 <view class="info">

 <view class="item">
 <text>姓名：text>
 <input type="text" name="name" placeholder="{{name}}" focus="{{focus}}">
 view>

 <view class="item sex">
 <radio-group name="sex" class="radio-group" bindchange="radioChange">
   <label class="radio" wx:for="{{sexs}}">
     <radio value="{{item.name}}" color="#FFC800" checked="{{item.checked}}">{{item.value}}
   radio>label>
 radio-group>
 view>


 <view class="item">
 <text>手机：text>
 <input name="tel" type="number" placeholder="{{tel}}" focus="{{focus}}">
 view>


 view>

 <view class="item-title">
 <text>服务地址text>
 view>

 <view class="info">

 <view class="item">
 <text>地址：text>
 <picker name="addre" class="addre" value="{{addreValue}}" range="{{addreRange}}" bindchange="addrePickerBindchange">
  {{addreRange[addreValue]}}
 picker>

 view>

 <view class="item">
 <text>门牌号：text>
 <input name="door" type="text" placeholder="{{door}}" focus="{{focus}}">
 view>

 <view class="item">
 <text>预约日期：text>
 <picker name="date" mode="date" value="{{dateValue}}" start="2017-05-19" end="2100-12-12" bindchange="datePickerBindchange">
     {{dateValue}}
 picker>
 　|
 <picker name="time" mode="time" value="{{timeValue}}" start="08:00" end="18:00" bindchange="timePickerBindchange">
   {{timeValue}}
 picker>
 view>

 view>

 <view class="item-title">
 <text>详情text>
 view>

 <view class="info">

 <view class="item">
 <text>房屋面积：text>
 <picker name="area" class="area" value="{{areaValue}}" range="{{areaRange}}" bindchange="areaPickerBindchange">
  {{areaRange[areaValue]}}
 picker>
 <text>㎡text>
 <text class="remind">(以便自动计算保洁时间和服务人数)text>
 view>


 <view class="item">
 <checkbox-group bindchange="checkboxChange" name="marks">
   <label class="checkbox" wx:for="{{marks}}">
     <checkbox value="{{item.name}}" checked="{{item.checked}}" color="#FFC800">{{item.value}}
   checkbox>label>
 checkbox-group>
 view>

 <view class="item">
 <text>备注：text>
 <input name="comment" type="text" placeholder="{{comment}}" focus="{{focus}}">
 view>


 view>
 <view class="sign"><input name="sign" type="text" value="{{sign}}">view>

         <button class="submit" bindtap="btnSubmit" formtype="submit">立即预约button>
   form>
 view>

第一个页面的js

 Page({
   data:{
     // text:"这是一个页面"
     name:'请填写您的姓名',
     tel:'请填写您的手机号',
     addreValue:0,
     addreRange:['　　　　　　　　','长沙市芙蓉区','长沙市天心区','长沙市雨花区','长沙市开福区','长沙市岳麓区'],
     door:'例如：xx小区x单元xxx室',
     dateValue:'　预约日期',
     timeValue:'　时间',
     price:'7',
      sexs: [
       {name: 'man', value: '男士　　',checked: 'true'},
       {name: 'woman', value: '女士' }
     ],
     sign:Date.now()+'0'+Math.ceil(Math.random()*10000)
   },

    onLoad: function(options) {
     this.setData({
       keywords: options.keywords
     })
   } ,

   addrePickerBindchange:function(e){
     this.setData({
       addreValue:e.detail.value
     })
   },
   areaPickerBindchange:function(e){
     this.setData({
       areaValue:e.detail.value
     })
   },
   timePickerBindchange:function(e){
     this.setData({
       timeValue:e.detail.value
     })
   },
   datePickerBindchange:function(e){
     this.setData({
       dateValue:e.detail.value
     })
   },
   formSubmit: function(e) {
     var warn = "";//弹框时提示的内容
     var flag = true;//判断信息输入是否完整
     //判断的顺序依次是：姓名-手机号-地址-具体地址-预约日期-预约时间-开荒面积
     if(e.detail.value.name==""){
       warn = "请填写您的姓名！";
     }else if(e.detail.value.tel==""){
       warn = "请填写您的手机号！";
     }else if(!(/^1(3|4|5|7|8)\d{9}$/.test(e.detail.value.tel))){
       warn = "手机号格式不正确";
     }else if(e.detail.value.addre=='0'){
       warn = "请选择您的地址"
     }else if(e.detail.value.door==""){
       warn = "请输入您的具体地址";
     }else if(e.detail.value.date=='　预约日期'){
       warn = "请选择预约日期";
     }else if(e.detail.value.time=='　时间'){
       warn = "请选择预约时间";
     }else if(e.detail.value.area==''){
       warn = "请输入您的开荒面积";
     }else{
        flag=false;//若必要信息都填写，则不用弹框，且页面可以进行跳转
        var that = this;
        //？后面跟的是需要传递到下一个页面的参数
        wx.navigateTo({
         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
         })
        console.log('form发生了submit事件，携带数据为：', e.detail.value);
     }
     //如果信息填写不完整，弹出输入框
     if(flag==true){
       wx.showModal({
       title: '提示',
       content:warn
     })
   }
   }



 })

第一个页面的wxss

 page {
   display: block;
   min-height: 100%;
   background-color:#f6f6f6;
   font-family: "微软雅黑";
   font-size: 30rpx;
   color:#353535;
   position: relative;
 }
 .section text{
     padding-left:25rpx;
 }
 .info{
     background-color: #fff;
 }
 .item{
     height:90rpx;
     align-items: center;
     display:flex;
     flex-direction: row;
     border:1rpx solid #eee;
 }

 .item input{
     padding-left:5rpx;
     font-family: "微软雅黑";
 }
 .item-title{
     height:60rpx;
     line-height:80rpx;
 }
 .area{
     width:20%;
 }
 .remind{
     color:#e64340;
     font-size:20rpx;
 }
 .submit{
     position: absolute;
     background-color:#FFC800;
     bottom: 0;
     width:100%;
 }

 .addre{
     /*color:#939393;*/
     width:400rpx;
 }
 .area{
     width:150rpx;
     border:1rpx solid #939393;
 }
 .text_box{
     padding-left:100rpx;
 }
 .map{
     width:550rpx;
     color:#939393;
 }
 .more{
     color:#939393;
     padding-left:30rpx;
     float:right;
 }
 .sex{
     padding-left:120rpx;
 }
 .checkbox{
     padding-left:25rpx;
 }

 .sign{
     display: none;
     float:left;
 }
 input{
     width:75%;
 }

第二个页面的wxml

 <view class="container">

 <view class="section">
 <view class="title">
 <text>订单详情text>
 view>
 <view class="info">
 <view class="item">
 <text>服务项目：text><text>{{project}}text>
 view>
 <view class="item">
 <text>联系电话：text><text>{{tel}}text>
 view>
 <view class="item">
 <text>服务地址：text><text>{{addre}}text>
 view>
 view>
 view>


 <view class="section">
 <view class="title">
 <text>服务详情text>
 view>
 <view class="info">

 <view class="item item2 ">
 <view class="time">
 <text>{{date}}号 {{time}}text>
 view>
 <view class="choose">
 <img class="sub1" src="{{sub}}" mode="widthFix" bindtap="subTime">
 {{timeNum}}<img src="{{add}}" mode="widthFix" bindtap="addTime">
 <text> 小时text>
 view>
 view>

 <view class="item item2">
 <text>阿姨人数：text>
 <view class="choose">
 <img class="sub1" src="{{sub}}" mode="widthFix" bindtap="subPerson">
 {{personNum}}<img src="{{add}}" mode="widthFix" bindtap="addPerson">
 <text> 位text>
 view>
 view>

 view>
 view>


 <view class="section">
 <view class="title">
 <text>支付方式text>
 view>
 <view class="info">
 <view class="item item3">
 <text>微信支付：text><icon type="success" size="25">
 icon>view>
 view>
 view>


 <view class="confirm">

     <view class="text2"><text>待支付text><text class="red">¥{{pay}}text>view>
     <navigator url="../payDetail/payDetail">
     <view class="text3" bindtap="confirmPay">确认支付view>
     navigator>
 view>

 view>

第二个页面的js

 Page({
   data:{
     project:'家庭保洁',
     sub:'../../images/sub.png',
     add:'../../images/add.png',
     timeNum:'3',
     personNum:'1',
     pay:'85'
   },
   onLoad: function(options) {
     this.setData({
       tel:options.tel,
       addre:options.addre+options.door,
       date:options.date,
       time:options.time
     })
   },
   addTime:function(e){
     var time = ++this.data.timeNum;
     this.setData({
       timeNum : time
     });

   },
    subTime:function(e){
     var time = --this.data.timeNum;
     this.setData({
       timeNum : time
     });

   },
    addPerson:function(e){
     var num = ++this.data.personNum;
     this.setData({
       personNum : num
     })

   },
    subPerson:function(e){
     var num = --this.data.personNum;
     this.setData({
       personNum : num
     })

   },

   confirmPay:function(){
     console.log(this.data)
   }
 })

第二个页面的wxss

 page {
   display: block;
   min-height: 100%;
   background-color:#f6f6f6;
   font-family: "微软雅黑";
   font-size: 30rpx;
   color:#353535;
   position: relative;
 }
 .section{
     background-color: #fff;
     margin-top:50rpx;
     padding:30rpx;
 }


 .title{
     border-bottom:2rpx solid #eee;
     height:50rpx;
     line-height: 50rpx;
     font-size: 27rpx;
     margin-bottom: 10rpx;
 }
 .item{
     height:60rpx;
     line-height: 60rpx;
 }
 .item2{
     margin:10rpx 0 ;
     align-items: center;
     line-height: 60rpx;
 }

 .time{float:left;}
 .item2 .choose{
     float:right;
     display:flex;
     width:300rpx;

 }
 .item2 image{
   width:50rpx;
   margin:0 10rpx;
 }


 .item3{
     font-size:35rpx;
     display: flex;
     justify-content: space-between;
 }

 .confirm{
     height:100rpx;
     position: absolute;
     bottom: 0;
     width:100%;
     background-color: #fff;
     font-size: 40rpx;
 }
 .confirm .text1{
     margin-left:20rpx;
     float:left;
     font-size: 35rpx;
     line-height:100rpx;
 }
 .confirm .text2{
     margin-left:20rpx;
     float:left;
     font-size: 35rpx;
     line-height:100rpx;
 }
 .text3{
     text-align: center;
     font-weight: bold;
     background-color:#FFC800;
     width:40%;
     float: right;
     line-height: 100rpx;
 }
 .red{
     color:#e64340;
 }