微信小程序表单验证

wxml：

<form catchsubmit="formSubmit">

姓名

<input type="text" placeholder="请输入姓名" name="username"/>

分类 

<view class='fenlei'>

  <text>分类</text>

  <!-- 下拉框 -->

    <view class='select_box'>

      <view class='select' catchtap='selectTaps'>

        <input class='select_text' name="c_id" value="{{indexs}}"/>{{selectDatas[indexs]}}

      </view>

      <view class='option_box' style='height:{{shows?(selectDatas.length>5?300:selectDatas.length*60):0}}rpx;'>

        <text class='option' style='{{indexs==selectDatas.length-1&&"border:0;"}}' wx:for='{{selectDatas}}' wx:key='this' data-index='{{index}}' catchtap='optionTaps'>{{item}}</text>

      </view>

    </view>

</view>

封面

<view class="file" bindtap="file">+</view>

<button style="margin: 30rpx 0" type="default" formType="submit">确认投稿</button>

</form>

样式：wxss

.file{

  width: 80px;

  height: 80px;

  font-size: 50px;

  color: #cccccc;

  border: 1px solid #cccccc;

}

/* fenlei */

.fenlei{

  margin: 0 25rpx;

  height: 90rpx;

  line-height: 90rpx;

  border-bottom: 1rpx solid #e6e6e6;

  display: flex;

  align-items: center;

}

.fenlei text{

  font-size: 30rpx;

  color: #999999;

  margin-left: 15rpx;

}

/* 下拉框 */

.select_box {

  background: #fff;

  width: 620rpx;

  /* margin: 0 auto; */

  height: 90rpx;

  line-height: 90rpx;

  text-align: left;

  position: relative;

}

.select {

  box-sizing: border-box;

  width: 100%;

  height: 86rpx;

  /* border: 1px solid #efefef; */

  border-radius: 8rpx;

  display: flex;

  align-items: center;

  padding: 0 20rpx;

}

.select_text {

  font-size: 28rpx;

  flex: 1;

  color: rgb(102, 102, 102);

  line-height: 86rpx;

  height: 86rpx;

}

.select_img {

  width: 40rpx;

  height: 40rpx;

  display: block;

  transition: transform 0.3s;

}

.select_img_rotate {

  transform: rotate(180deg);

}

.option_box {

  position: absolute;

  top: 86rpx;

  width: 100%;

  /* border: 1px solid #efefef; */

  box-sizing: border-box;

  height: 0;

  overflow-y: auto;

  border-top: 0;

  background: #fff;

  transition: height 0.3s;

  z-index: 100;

}

.option {

  display: block;

  line-height: 40rpx;

  font-size: 28rpx;

  border-bottom: 1px solid #efefef;

  padding: 10rpx;

  color: rgb(102, 102, 102);

}

js:

Page({

  /**

   * 页面的初始数据

   */

  data: {

    shows: false, //控制下拉列表的显示隐藏，false隐藏、true显示

    selectDatas: ['救灾援助', '公益赞助', '抗击疫情'], //下拉列表的数据

    indexs: 0, //选择的下拉列 表下标,

    image:"",

    win_scrollTop:0,

    aid:"",

    num:"",

  },

    // 点击下拉显示框

    selectTaps() {

      this.setData({

        shows: !this.data.shows,

      });

    },

    // 点击下拉列表

    optionTaps(e) {

      let Indexs = e.currentTarget.dataset.index; //获取点击的下拉列表的下标

      console.log(Indexs)

      this.setData({

        indexs: Indexs,

        shows: !this.data.shows

      });

    },

//上传图片

    file(e){

      var that = this;

      wx.chooseImage({ //从本地相册选择图片或使用相机拍照

        count: 1, // 默认9

        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有

        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有

        success:function(res){

        //console.log(res)

        //前台显示

        that.setData({

        source: res.tempFilePaths

        })

        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片

        var tempFilePaths = res.tempFilePaths

        wx.uploadFile({

        url: 'http://www.laravel8.week2.com/api/fileAdd',

        filePath: tempFilePaths[0],

        name: 'image',

        header: {

          token:wx.getStorageSync('token') 

        },

        success:function(res){

        //console.log(res.data)

          that.setData({

            image:res.data

          })

        }

        })

      }

    })

    },

    onPageScroll: tool.throttle(function(msg){

      this.setData({

        win_scrollTop: msg[0].scrollTop

      });

   }),

//防抖提交

   formSubmit: tool.debounce(function(e) {

    var image = this.data.image

    var aid = this.data.aid  //参数可以不写

    var num = this.data.num

    console.log('form发生了submit事件，携带的数据为：', e[0].detail.value)

    const params = e[0].detail.value

    //校验表单

    if (!this.WxValidate.checkForm(params)) {

      const error = this.WxValidate.errorList[0]

      this.showModal(error)

      return false

    }

    this.showModal({

      msg: '提交成功'

    })

    wx.request({

      url: 'http://www.laravel8.week2.com/api/stroeProduction', 

      data: {

        image:image,

        aid:aid,

        num:num,

        params:params

      },

      method:"POST",

      header: {

        token:wx.getStorageSync('token') 

      },

      success (res) {

        console.log(res.data)

        if(res.data.code==200){

          wx.showToast({

            title: '报名成功',

          })

          wx.navigateTo({

            url: '/pages/success/success',

          })

        }

      }

    })

   })

   //报错提示

    showModal(error) {

      wx.showModal({

        content: error.msg,

        showCancel: false,

      })

   },

   //验证函数

   initValidate() {

    const rules = {

      username: {

        required: true,

        minlength:2

      },

      c_id:{

        required:true,

      }

    }

    const messages = {

      username: {

        required: '请填写姓名',

        minlength:'请输入正确的姓名'

      },

      c_id:{

        required:'请选择分类',

      }

    }

    this.WxValidate = new WxValidate(rules, messages)

  },

})

php:

public function fileAdd(){

    $disk = \Storage::disk('qiniu'); //使用七牛云上传

    $time = date('Y-m-d');

    $filename = $disk->put($time, request()->file('image'));//上传 这里的image是前端的name值，自己来定

    if(!$filename) {
        echo "上传失败";
    }

    $img_url = $disk->getDriver()->downloadUrl($filename); //获取下载链接

    echo $img_url;
}

//添加作品投稿
public function stroeProduction(request $request)
{
    $params = $request->post('params');
    $aid = $request->post('aid');
    $num = $request->post('num')-1;
    $filename = $request->post('image');

    $params['image'] = $filename;
    $params['aid'] = $aid;
    $res = Production::create($params,true);
    if ($res!==false){
       $up = Activity::where('id',$aid)->update(['num'=>$num]);
       if ($up!==false){
           return ['code'=>'200','提交成功','data'=>$num];
       }
    }
}

防抖请参考：微信小程序之使用函数防抖与函数节流 - 站住，别跑 - 博客园

表单请参考：微信小程序开发之表单验证（WxValidate使用）_Callback的博客-CSDN博客_微信小程序表单验证

下拉选项请参考：微信小程序下拉选项框_itfallrain的博客-CSDN博客_微信小程序下拉框