微信小程序表单添加提交以及验证

最新推荐文章于 2024-06-06 12:15:55 发布

锕豪513

最新推荐文章于 2024-06-06 12:15:55 发布

阅读量623

点赞数

本文链接：https://blog.csdn.net/lh25946/article/details/119431401

版权

本文详细介绍了微信小程序中用户授权、表单提交、地理位置选择、日期及地区选择等交互功能的实现，并展示了JavaScript代码处理事件的方式。在后端，通过PHP接收并处理提交的数据，进行数据验证和存储。此示例适用于前端开发，特别是小程序开发的学习者。

摘要由CSDN通过智能技术生成

wxml页面

<!-- <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">手机号授权登录</button> -->
<l-steps active-index="{{show}}">
  <l-step title="主体认证"> </l-step>
  <l-step title="选择等级"></l-step>
  <l-step title="开始赚钱"></l-step>
</l-steps>
<form bindsubmit="formAdd" >
            营业执照照片<l-image-picker count="9" bind:linchange="onChangeTap" />
            <l-input label="统一社会信用代码"  placeholder="请输入15-18位" name="code" bind:lininput="code" />
            <l-input label="小区名称"  placeholder="请输入商户名称" name="name" bind:lininput="name" />
            
            请选择地址<l-button type="default" bindtap='map' bind:lininput="city" name="city">{{city}}</l-button>
           
            <view class="section">
              <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange" name="date">
                <view class="picker">
                  选择时间: {{date}}
                </view>
              </picker>
            </view>

            
<view>
  <picker mode="region" bindchange="bindRegionChange" value="{{region}}">
      <text wx:if="{{region==''}}">请选择省市区</text>
      <text wx:if="{{region!=''}}">{{region[0]}}、{{region[1]}}、{{region[2]}}</text>
  </picker>
</view>


<button type="default" form-type="submit">添加</button>
          </form>

js处理事件

// pages/city/city.js
import "../../utils/WxValidate"
Page({

  /**
   * 页面的初始数据
   */
  data: {
    address:'选择位置',
    region: [],// 选中的数据
    name:'',
    designation:'',
    number:'',
    show:0,
  },
  TimeID:-1,

  map() {
    wx.chooseLocation({
     success: result => {
          this.setData({
            city:result.address+result.name
          })
      },
      
    })
  },


  //文件上传之后的方法
  onChangeTap(event) {
    //获取最新上传的所有图片临时路径
    let tempFilePaths = event.detail.current;
    //定义一个空数组，进行存放上传图片url
    var urlArr = [];
    for (let index = 0; index < tempFilePaths.length; index++) {
      wx.uploadFile({
        url: '', //仅为示例，非真实的接口地址
        filePath: tempFilePaths[index],
        name: 'file',
        header:{
          'token':wx.getStorageSync('token')
        }, 
        success: res => {
          const data = JSON.parse(res.data);
          //do something
          urlArr.push(data.url)
          this.setData({
            urls: urlArr
          })
        }
      })
 
    }
  },
  //点击确定按钮
  bindRegionChange: function (e) {
    this.setData({
      region: e.detail.value
    })
  },
  code(code){
    this.setData({
      code:code.detail.value
  })
  },
  name(name){
    this.setData({
      name:name.detail.value
  })
  },
  region(region){
    this.setData({
      region:region.detail.value
    })
  },
  city(city){
    this.setData({
      city:city.detail.value
  })
  },
  date(date){
    console.log(date.detail.value)
    this.setData({
      
      date:date.detail.value
  })
  },

   //成功提交按钮
 formAdd:function(e){

  
   console.log(e)
  let name = this.data.name;
  let city=this.data.city;
  let region=this.data.region;
  let code=this.data.code;
  let date=e.detail.value.date
  console.log(e);
    
  clearTimeout(this.TimeID);
       		 this.TimeID = setTimeout(() => {
            //4.准备发送请求获取数据
	         wx.request({
	         })
        },1000);
  wx.request({
    url: '',
    header:{
      'token':wx.getStorageSync('token')
    }, 
    method:"POST",
    data:{
      name:name,
      city:city,
      date:date,
      region:region,
      code:code
    },
    success:res=>{
        let msg= res.data.msg
        if(msg=="添加成功"){
            this.setData({
              show:1,
              
            }),wx.navigateTo({
              url: '/pages/mys/mys',
            })
        }
    }
  })
},
})

json样式

{
  "usingComponents": {
    "l-input":"/miniprogram_npm/lin-ui/input",
    "l-image-picker":"/miniprogram_npm/lin-ui/image-picker",
    "l-button":"/miniprogram_npm/lin-ui/button",
    "l-steps":"/miniprogram_npm/lin-ui/steps",
    "l-step":"/miniprogram_npm/lin-ui/step"
  }
}

后台php处理

public function County(Request $request)
    {
        $data=input('post.');
        $region = input('post.region');
//        $nameen = json_decode($region,true);
        $data['province']=$region[0];
        //市
        $data['citys']=$region[1];
        //区
        $data['area']=$region[2];
        if($data){
            try {
                validate(FangVaildate::class)->check([
                    'name'  => $data['name'],
                    'city'=>$data['city'],
                    'code'=>$data['code']
                ]);
            } catch (ValidateException $e) {
                // 验证失败 输出错误信息
                dump($e->getError());
            }
        }
        $info=Prise::create($data);
        if($info){
            return json(['code'=>'添加成功','msg'=>'添加成功','data'=>$info]);
        }





    }