微信小程序 表单 验证

版权声明：111 https://blog.csdn.net/qq_42897782/article/details/87777894

表单分为两个主要部分，一个是客户提交的信息，一个是主要内容（内含文字和上传图片），完整源码见上一篇

功能：点击文字则向上划出文本输入框（点击完成的时候做判断，内容不为空），点击图片则打开上传图片，

思路：

1.前端布局给两个按钮  添加文字  bindtap='addTextTap'    上传图片   bindtap='chooseImg' 

   一个隐藏的视窗   通过textreaHidden来控制是否显示视窗

<!--pages/activity/signup/signup.wxml-->
<!-- banner图 -->
<view class='bg_white' style='padding-bottom:30rpx;'>
  <image src='/images/actbanner.jpg' style='width:100%;height:220rpx;'></image>
</view>
<!-- 表单主要内容 -->
<view class='p_b20' style='width:90%;margin:0 auto;'>
  <form bindsubmit="formSubmit">
    <view class='addview20' style='padding-bottom:90rpx;'>
      <view class='bg_white font14 gray5 p_all10 p_b20'style='width:95%;margin 0 auto;padding-top:20rpx;'>
        <view class='inputstyle'>
          <picker bindchange="bindPickerzone" value="{{index2}}" range="{{userZoneList}}">
            <input class='fl' type='text' placeholder='所在城市' placeholder-class='place' name="city" disabled='disabled' value='{{userZoneList[index2]}}'></input>
            <text class='fr m_t5 grayb'style='margin-right:20rpx;'>﹀</text>
            <view class='cl'></view>
          </picker>
        </view>
        <input type='number' class='inputstyle' placeholder-class='place' name="area" placeholder='房屋面积(㎡)'></input>
        <input type='number' class='inputstyle' maxlength='11' placeholder-class='place' name="phoneNumber" placeholder='手机号'></input>
        <input type='text' class='inputstyle' placeholder-class='place' name="userName" placeholder='姓名'></input>
      </view>
      <!-- 正文内容 -->
      <view class='p_lr15' wx:if="{{content.length > 0}}">
        <view class='contentView' wx:for="{{content}}">
          <view class='m_t30 pr' wx:if="{{item.name == 'img'}}">
            <image src='{{item.contents}}' mode='widthFix' style='width:100%;'></image>
            <view class='delet pa tc font22 white bg_grayc' data-index='{{index}}' bindtap='deletTap'><text>×</text></view>
          </view>
          <view class='font15 gray2 tj lineH_m text p_all10 m_t30 pr' wx:if="{{item.name == 'text'}}">
            <text>{{item.contents}}</text>
            <view class='delet pa font22 white bg_grayc' data-index='{{index}}' bindtap='deletTap'><text>×</text></view>
            <view class='edit pa bg_grayc tc' data-index='{{index}}' bindtap='editTap'>
              <image src='/images/icon/edit.png' style='width:26rpx;height:26rpx;margin-top:12rpx'></image>
            </view>
          </view>
        </view>
      </view>
    
      <view class='tc p_tb15'>
        <text class='block font15 gray9' wx:if="{{content.length <= 0}}">开始添加内容</text>
        <view class='m_t10' bindtap='addTap'><text class='addto bg_graye white font24' bindtap='addtoTap'>+</text></view>
        <view class='inline_block p_tb5 p_lr30 addview m_t10' wx:if="{{addHidden == false}}">
          <view class='inline_block m_r20' bindtap='addTextTap'>
            <image src='/images/icon/fa_03.png' style='width:40rpx;height:40rpx;'></image>
            <text class='block font14 gray2 tc'>文字</text>
          </view>
          <view class='inline_block' bindtap='chooseImg'>
            <image src='/images/icon/fa_05.png' style='width:40rpx;height:40rpx;'></image>
            <text class='block font14 gray2 tc'>图片</text>
          </view>
        </view>
      </view>
    
      <view class='pf textrea bg_white {{textreaHidden == true ? "animation_huachu" : "animation_huaru"}}' wx:if="{{textreaHidden == false}}">
        <form bindsubmit="textreaSubmit">
          <view class='p_all15 bd_b'style='min-height:300rpx;'>
            <textarea value='{{editVal}}' adjust-position="true" maxlength='-1' name="textarea" placeholder='请输入内容……' auto-height='true' class='font15 gray2'></textarea>
          </view>
            <view class='tr p_lr15'>
              <button class='green font16' form-type="submit">
                <text>完成</text>
              </button>
            </view>
        </form>
      </view>
    </view>
  <!-- 提交报名 -->
    <view class='tr p_lr15 bg_white' style='margin-top:30rpx;'>
      <button class='form_button' form-type="submit">
        <text class='p_tb5 p_lr20 bg_theme white font16 tc block' style='border-radius:15rpx;width:100%;height:80rpx;line-height:60rpx;margin: 0 auto;'>提交信息</text>
      </button>
    </view>
  </form>
</view>

 data中的初始数据 

data: {
    sortCurrent: '',//
    upload_limit: 1,// 默认最多上传9张
    img_srcs: [], //如果是编辑状态，只需要把原信息的图片地址放到此处就可以显示出来
    img_src: [],
    //is_designer: wx.getStorageSync('is_designer'),//是否是设计师
    content: [],//正文内容
    textreaHidden: true,
    addHidden: false,
    editVal: '',//编辑文字内容
    editIndex: '',//编辑的index
    userZoneList: [],//城市列表
    index2: '',//城市下标
  },

2.  在js中给textreaHidden初始值未true（即 正文内容输入框默认隐藏）

    点击添加文字   textreaHidden赋值为false  （即 正文内容输入框显示）     

addTextTap: function (e) {
    var that = this;
    that.setData({
      textreaHidden: false,
    })
 },

  输入文字后点击完成（此处需要判断文字内容是否为空） ，为空的话弹框提示返回false

 //文字textrea提交
  textreaSubmit: function (e) {
    var that = this;
    console.log(e.detail.value.textarea)
    var j = that.data.content.length;
    var content = that.data.content;
    var value = e.detail.value.textarea;
    console.log(value);//上传的内容
    //判断内容是否为空
    if (value !== "") {
      if (that.data.editIndex !== '') {
        //editIndex
        content[that.data.editIndex].contents = value;
      } else {
        content[j] = {
          "name": "text",
          "contents": value
        };
      }
      that.setData({
        textreaHidden: true,
        content: content,
        addHidden: true
      })
      console.log(that.data.content)
    } else {
      wx.showModal({
        title: '提示',
        content: '内容不能为空，请输入内容',
        success: function (res) {
          if (res.confirm) {
            return false;
          } else {
            that.setData({
              textreaHidden: true,
            })
          }
        }
      })
    }
  },

    点击上传图片

chooseImg: function (e) {
    var that = this;
    wx.chooseImage({
      count: that.data.upload_limit,
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths;
        console.log(tempFilePaths)
        that.sendPhotos(tempFilePaths);
        console.log(that.data.content);
      }
    })
  },

将图片发送给后端服务期，预览图片，删除模块 

//发图片发送给后端服务器
  sendPhotos: function (tempFilePaths) {
    var that = this
    wx.showNavigationBarLoading();
    console.log(tempFilePaths[0])
    if (tempFilePaths.length !== 0) {
      wx.uploadFile({
        url: app.d.ceshiUrl + 'comment.uploadPic',
        filePath: tempFilePaths[0],
        name: 'picture',
        header: { "Content-Type": "multipart/form-data" },
        success: function (res) {
          console.log(res.data)
          var data = JSON.parse(res.data)
          console.log(data)
          var j = that.data.content.length;
          var content = that.data.content;
          if (data !== '') {
            var path = data.path;
            content[j] = {
              "name": "img",
              "contents": "https://xcx.fczxwl.com/attachment/" + path
            };
          }
          that.setData({
            content: content,
            addHidden: true
          });
          console.log(that.data.content)
          wx.hideNavigationBarLoading();
          tempFilePaths.splice(0, 1);
          
          // that.sendPhotos(tempFilePaths);
        },
        fail: function (res) {
          console.log('上传图片到服务器失败');
        },
        complete: function (res) {
          console.log(res);
        }
      })
    }
  },
  //图片预览
  previewImage: function (e) {
    var img_srcs = this.data.img_srcs;
    var index = e.target.dataset.index;
    wx.previewImage({
      current: img_srcs[index],
      urls: img_srcs           // 需要预览的图片http链接列表
    })
  },
  //删除内容快
  deletTap: function (e) {
    var that = this;
    console.log(e)
    var index = e.currentTarget.dataset.index;
    var content = that.data.content;
    wx.showModal({
      title: '提示',
      content: '确定要删除？',
      success: function (res) {
        if (res.confirm) {
          content.splice(index, 1)
          that.setData({
            content: content,
          })
        }
      }
    })
  },

提交所有信息的js判断验证

   /**
   * 页面的初始数据
   */
  data: {
    sortCurrent: '',//
    upload_limit: 1,// 默认最多上传9张
    img_srcs: [], //如果是编辑状态，只需要把原信息的图片地址放到此处就可以显示出来
    img_src: [],

    content: [],//正文内容
    textreaHidden: true,
    addHidden: false,
    editVal: '',//编辑文字内容
    editIndex: '',//编辑的index
    userZoneList: [],//城市列表
    index2: '',//城市下标
  }, 

//发布提交信息
  formSubmit: function (e) {
    var that = this;
    console.log(that.data);
    var userInfo = wx.getStorageSync('userInfo');    //用户基本信息
    //console.log(e.detail.value)   //表单中input的值
    var city = e.detail.value.city;      //所在城市
    var area = e.detail.value.area;      //房屋面积
    var phoneNumber = e.detail.value.phoneNumber;     //手机号
    var userName = e.detail.value.userName;    //姓名
    var arr = {             //将正文内容传到data中
      "content": that.data.content
    }
    var mobile = /^[1][3,4,5,7,8][0-9]{9}$/;
    var isMobile = mobile.exec(e.detail.value.phoneNumber)  //校验手机号

    //所有消息有任一为空时
    if (city == "" || area=="" || phoneNumber=="" || userName=="") {
      wx.showModal({
        title: '发布提示',
        content: '您的信息缺失，请重新填写！',
        showCancel: false,
        success: function (res) {
          if (res.confirm) {
            return false;
          }
        }
      })
      wx.hideNavigationBarLoading();
    }
    //判断电话号格式是否正确
    else if (!isMobile) {
      console.log('form表单发生点击事件，携带的数据为：', e.detail.value)
      console.log('电话：', e.detail.value.phoneNumber)
        wx.showModal({
          title: '提示！！',
          content: '你输入的电话不符，请重新检查填写',
         })
    }
    //当所有消息不为空
    else {
      //判断主要内容
      console.log(arr.content.length);
      if (arr.content.length == 0){
        wx.showModal({
          title: '发布提示',
          content: '文章内容不能为空，请编辑内容',
          showCancel: false,
          success: function (res) {
            if (res.confirm) {
              return false;
            }
          }
        })
        wx.hideNavigationBarLoading();
      }else{
        wx.request({
          url: app.d.hostUrl + 'activity.addApply',
          data: {
            "openid": wx.getStorageSync('openid'),
            "nickname": userInfo.nickName,   //昵称
            "avatar": userInfo.avatarUrl,  //头像
            "name": e.detail.value.userName,  //姓名
            "zone": e.detail.value.city,   //城市
            "area": e.detail.value.area,   //手机号
            "tel": e.detail.value.phoneNumber,   //手机号
            "content": arr,  //内容
          },
          method: 'GET',
          header: {
            'Accept': 'application/json'
          },
          success: function (res) {
            console.log(res)
            wx.hideNavigationBarLoading();
            wx.showToast({
              title: '已提交报名',
              icon: 'success',
              duration: 2000,
              success: function () {
                setTimeout(function () {
                  wx.reLaunch({
                    url: '/pages/activity/home/home',
                  })
                }, 2000)
              }
            })
          }
        })
      }
    }
  },

 啊 ！！！写不下去了，以后再补充吧，欢迎路过的大神补充说明，不胜感激（下篇附上表单验证所有源码，语文不好，唉 ！）