小程序表单校验

小程序表单校验

在进行小程序校验的时候引入了wxvalidate.js进行校验。
参考文章 https://blog.csdn.net/weixin_41041379/article/details/82017301
但是提交表单的时候图片信息没有一同提交。所以提交的时候，虽然在验证规则里面定义了图片的校验，却一直提示没有上传。所以把图片有没有值单独拎出来验证是否为空。
wxml文件

<form bindsubmit="teformSubmit"> 
	<view class="invite">
	  <view class="invite-message">
	    <view class="headPic-wrap">
	      <view class="headPic">
	          <view  wx:if="{{!src}}" class="user-picurl" bindtap='choose'>
	               <image src="{{pictureUrl}}"></image>
	          </view>
	           <view  wx:else="{{!src}}" class="user-picurl" bindtap='choose'>
	               <image src="{{src}}"></image>
	          </view>
	      </view>
	      <view class="camera" bindtap="choose"><image src="../../imgs/icon/camera.png"></image></view>
	    </view>
	    <view class="input-wrap">
	      <view class="input-item">
	        <text>姓名</text><input class="user-name" placeholder="请输入姓名" name="userName" value="{{form.userName}}" focus/>
	      </view>
	      <view class="input-item">
	        <text>手机</text><input class="phone-number" placeholder="请输入手机号码" name="phoneNumber" value="{{form.phoneNumber}}"/>
	      </view>
	    </view>
	  </view>
	  <view class="btn-wrap">
	    <!-- v-if  v-else判断显示哪一个按钮 -->
	    <!-- <button class="submit-refer" wx:if="{{!submitBtn}}">请完善页面内容</button> -->
	    <button class="submit-btn" form-type="submit" >确认提交</button>
	  </view>
	</view>
</form>

JS文件

import WxValidate from '../../utils/WxValidate.js'
const app = getApp()
const {
  wxLoginForXcx
} = require('../../service/getData')
const {
  setStorageSync,
  getStorageSync,
} = require('../../utils/util.js')
var uploadImage = require('../../config/uploadFile.js');
var util = require('../../config/util.js');
var moment = require('../../utils/moment.min.js');

Page({
  data: {
    submitBtn: false,
    pictureUrl: '../../imgs/icon/picture.png',
    userName: '',
    phoneNumber: '',
    src: '',
    filePathbase64: '', //base64编码

    // 校验用的form表单
    form: {
      userName: '',
      phoneNumber: '',
    }
  },

  onLoad() {
    this.initValidate()//验证规则函数
    // rules: {};
    // messages: {}
  },

  // 校验校验校验
  //报错 
  showModal(error) {
    wx.showModal({
      content: error.msg,
      showCancel: false,
    })
  },
  //验证函数
  initValidate() {
    const rules = {
      userName: {
        required: true,
        minlength: 2
      },
      phoneNumber: {
        required: true,
        tel: true
      }
    }
    const messages = {
      userName: {
        required: '请填写姓名',
        minlength: '请输入正确的名称'
      },
      phoneNumber: {
        required: '请填写手机号',
        tel: '请填写正确的手机号'
      }
    }
    this.WxValidate = new WxValidate(rules, messages)
  },
  choose: function(e) {
    let that = this;
    wx.chooseImage({
      sizeType: ['original', 'compressed'], //可选择原图或压缩后的图片
      sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
      success: res => {
        this.setData({
          src: res.tempFilePaths[0]
        })
        const FileSystemManager = wx.getFileSystemManager();
        FileSystemManager.readFile({
          "filePath": res.tempFilePaths[0],
          "encoding": "base64",
          success(res) {
            that.setData({
              filePathbase64: res.data
            })
            console.log(res, '1111111111111')
          }
        })
      }
    })
  },
  teformSubmit: function(e) {
    let that = this;
    console.log('form=>', e)
    console.log('form发生了submit事件，携带的数据为：', e.detail.value)
    const params = e.detail.value
    //校验表单
    if (!this.WxValidate.checkForm(params)) {
      const error = this.WxValidate.errorList[0]
      this.showModal(error)
      return false
    }
    // 校验图片是否已经上传
    if (!that.data.src){
      // wx.showToast({
      //   title: '请上传图片',
      //   icon: 'loading',
      //   duration: 1000
      // });
      this.showModal({
        msg: '请上传图片'
      })
      return false
    }
    this.showModal({
      msg: '提交成功'
    })
  }
})

wxss文件

page{
  background-color: #f6f6f6;
}
.invite{
  font-size: 0;
}
.invite-message{
  background-color: #fff;
}

.headPic-wrap{
  width: 100%;
  height: 270rpx;
  position: relative;
}
.headPic{
  width: 215rpx;
  height: 215rpx;
  border-radius: 50%;
  background-color: #666;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -108rpx;
}
.headPic image{
  width: 215rpx;
  height: 215rpx;
  border-radius: 50%;
}
.camera{
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  right: 50%;
  margin-right: -120rpx;
  border: 2rpx solid #ccc;
}
.camera image{
  width: 44rpx;
  height: 40rpx;
  position: absolute;
  top: 14rpx;
  left: 16rpx;
}
.user-name, .phone-number{
  width: 510rpx;
  height: 65rpx;
  font-size: 24rpx;
  background-color: #f6f6f6;
  border-radius: 10rpx;
  padding: 0 25rpx;
  /* 超出显示省略号 */
  white-space: nowrap;
  text-overflow:ellipsis;
  overflow: hidden;
  display: inline-block;

  font-size: 24rpx;
	color: #999999;
}
.input-item{
  padding-top: 50rpx;
}
.input-wrap{
  padding-bottom: 50rpx;
}
.input-wrap text{
  font-size: 30rpx;
	font-weight: bold;
	color: #333333;
  display: inline-block;
  height: 65rpx;
  line-height: 65rpx;
  float: left;
  padding: 0 30rpx 0 45rpx;
}

.btn-wrap{
  height: 90rpx; 
  width: 695rpx;
  margin: 50rpx auto 0;
  border-radius: 10rpx;
  font-size: 30rpx;
}
.btn-wrap .submit-refer{
  background-color: #ccc;
  color: #fff;
}
.btn-wrap .submit-btn{
  background-color: #02bf63;
  color: #fff;
}

JSON文件

{
  "usingComponents": {
  },
  "navigationBarTitleText": "来访登记",
  "navigationBarBackgroundColor": "#000000",
  "onReachBottomDistance": 15,
  "backgroundTextStyle": "light",
  "enablePullDownRefresh": false
}