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

来源：互联网发布：淘宝买的人参编辑：程序博客网时间：2024/06/09 18:48

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

联系人姓名：      {{item.value}}  手机：服务地址地址： {{addreRange[addreValue]}}门牌号：预约日期：{{dateValue}}　|　  {{timeValue}}详情房屋面积： {{areaRange[areaValue]}}㎡(以便自动计算保洁时间和服务人数)      {{item.value}}  备注：

第一个页面的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

订单详情服务项目：{{project}}联系电话：{{tel}}服务地址：{{addre}}服务详情{{date}}号 {{time}} {{timeNum}} 小时阿姨人数： {{personNum}} 位支付方式微信支付：待支付¥{{pay}}确认支付

第二个页面的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;}

欢迎大家批评指正！

阅读全文

3 0