devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序 表单 验证_actbanner

作者：盐析白兔 | 2024-02-22 22:49:10

赞

踩

actbanner

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

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

思路：

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

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

  1. <!--pages/activity/signup/signup.wxml-->
  2. <!-- banner图 -->
  3. <view class='bg_white' style='padding-bottom:30rpx;'>
  4.   <image src='/images/actbanner.jpg' style='width:100%;height:220rpx;'></image>
  5. </view>
  6. <!-- 表单主要内容 -->
  7. <view class='p_b20' style='width:90%;margin:0 auto;'>
  8.   <form bindsubmit="formSubmit">
  9.     <view class='addview20' style='padding-bottom:90rpx;'>
  10.       <view class='bg_white font14 gray5 p_all10 p_b20'style='width:95%;margin 0 auto;padding-top:20rpx;'>
  11.         <view class='inputstyle'>
  12.           <picker bindchange="bindPickerzone" value="{{index2}}" range="{{userZoneList}}">
  13.             <input class='fl' type='text' placeholder='所在城市' placeholder-class='place' name="city" disabled='disabled' value='{{userZoneList[index2]}}'></input>
  14.             <text class='fr m_t5 grayb'style='margin-right:20rpx;'>﹀</text>
  15.             <view class='cl'></view>
  16.           </picker>
  17.         </view>
  18.         <input type='number' class='inputstyle' placeholder-class='place' name="area" placeholder='房屋面积(㎡)'></input>
  19.         <input type='number' class='inputstyle' maxlength='11' placeholder-class='place' name="phoneNumber" placeholder='手机号'></input>
  20.         <input type='text' class='inputstyle' placeholder-class='place' name="userName" placeholder='姓名'></input>
  21.       </view>
  22.       <!-- 正文内容 -->
  23.       <view class='p_lr15' wx:if="{{content.length > 0}}">
  24.         <view class='contentView' wx:for="{{content}}">
  25.           <view class='m_t30 pr' wx:if="{{item.name == 'img'}}">
  26.             <image src='{{item.contents}}' mode='widthFix' style='width:100%;'></image>
  27.             <view class='delet pa tc font22 white bg_grayc' data-index='{{index}}' bindtap='deletTap'><text>×</text></view>
  28.           </view>
  29.           <view class='font15 gray2 tj lineH_m text p_all10 m_t30 pr' wx:if="{{item.name == 'text'}}">
  30.             <text>{{item.contents}}</text>
  31.             <view class='delet pa font22 white bg_grayc' data-index='{{index}}' bindtap='deletTap'><text>×</text></view>
  32.             <view class='edit pa bg_grayc tc' data-index='{{index}}' bindtap='editTap'>
  33.               <image src='/images/icon/edit.png' style='width:26rpx;height:26rpx;margin-top:12rpx'></image>
  34.             </view>
  35.           </view>
  36.         </view>
  37.       </view>
  38.     
  39.       <view class='tc p_tb15'>
  40.         <text class='block font15 gray9' wx:if="{{content.length <= 0}}">开始添加内容</text>
  41.         <view class='m_t10' bindtap='addTap'><text class='addto bg_graye white font24' bindtap='addtoTap'>+</text></view>
  42.         <view class='inline_block p_tb5 p_lr30 addview m_t10' wx:if="{{addHidden == false}}">
  43.           <view class='inline_block m_r20' bindtap='addTextTap'>
  44.             <image src='/images/icon/fa_03.png' style='width:40rpx;height:40rpx;'></image>
  45.             <text class='block font14 gray2 tc'>文字</text>
  46.           </view>
  47.           <view class='inline_block' bindtap='chooseImg'>
  48.             <image src='/images/icon/fa_05.png' style='width:40rpx;height:40rpx;'></image>
  49.             <text class='block font14 gray2 tc'>图片</text>
  50.           </view>
  51.         </view>
  52.       </view>
  53.     
  54.       <view class='pf textrea bg_white {{textreaHidden == true ? "animation_huachu" : "animation_huaru"}}' wx:if="{{textreaHidden == false}}">
  55.         <form bindsubmit="textreaSubmit">
  56.           <view class='p_all15 bd_b'style='min-height:300rpx;'>
  57.             <textarea value='{{editVal}}' adjust-position="true" maxlength='-1' name="textarea" placeholder='请输入内容……' auto-height='true' class='font15 gray2'></textarea>
  58.           </view>
  59.             <view class='tr p_lr15'>
  60.               <button class='green font16' form-type="submit">
  61.                 <text>完成</text>
  62.               </button>
  63.             </view>
  64.         </form>
  65.       </view>
  66.     </view>
  67.   <!-- 提交报名 -->
  68.     <view class='tr p_lr15 bg_white' style='margin-top:30rpx;'>
  69.       <button class='form_button' form-type="submit">
  70.         <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>
  71.       </button>
  72.     </view>
  73.   </form>
  74. </view>

 data中的初始数据 

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

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

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

  1. addTextTap: function (e) {
  2.     var that = this;
  3.     that.setData({
  4.       textreaHidden: false,
  5.     })
  6.  },

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

  1.  //文字textrea提交
  2.   textreaSubmit: function (e) {
  3.     var that = this;
  4.     console.log(e.detail.value.textarea)
  5.     var j = that.data.content.length;
  6.     var content = that.data.content;
  7.     var value = e.detail.value.textarea;
  8.     console.log(value);//上传的内容
  9.     //判断内容是否为空
  10.     if (value !== "") {
  11.       if (that.data.editIndex !== '') {
  12.         //editIndex
  13.         content[that.data.editIndex].contents = value;
  14.       } else {
  15.         content[j] = {
  16.           "name": "text",
  17.           "contents": value
  18.         };
  19.       }
  20.       that.setData({
  21.         textreaHidden: true,
  22.         content: content,
  23.         addHidden: true
  24.       })
  25.       console.log(that.data.content)
  26.     } else {
  27.       wx.showModal({
  28.         title: '提示',
  29.         content: '内容不能为空，请输入内容',
  30.         success: function (res) {
  31.           if (res.confirm) {
  32.             return false;
  33.           } else {
  34.             that.setData({
  35.               textreaHidden: true,
  36.             })
  37.           }
  38.         }
  39.       })
  40.     }
  41.   },

 

    点击上传图片

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

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

  1. //发图片发送给后端服务器
  2.   sendPhotos: function (tempFilePaths) {
  3.     var that = this
  4.     wx.showNavigationBarLoading();
  5.     console.log(tempFilePaths[0])
  6.     if (tempFilePaths.length !== 0) {
  7.       wx.uploadFile({
  8.         url: app.d.ceshiUrl + 'comment.uploadPic',
  9.         filePath: tempFilePaths[0],
  10.         name: 'picture',
  11.         header: { "Content-Type": "multipart/form-data" },
  12.         success: function (res) {
  13.           console.log(res.data)
  14.           var data = JSON.parse(res.data)
  15.           console.log(data)
  16.           var j = that.data.content.length;
  17.           var content = that.data.content;
  18.           if (data !== '') {
  19.             var path = data.path;
  20.             content[j] = {
  21.               "name": "img",
  22.               "contents": "https://xcx.fczxwl.com/attachment/" + path
  23.             };
  24.           }
  25.           that.setData({
  26.             content: content,
  27.             addHidden: true
  28.           });
  29.           console.log(that.data.content)
  30.           wx.hideNavigationBarLoading();
  31.           tempFilePaths.splice(0, 1);
  32.           
  33.           // that.sendPhotos(tempFilePaths);
  34.         },
  35.         fail: function (res) {
  36.           console.log('上传图片到服务器失败');
  37.         },
  38.         complete: function (res) {
  39.           console.log(res);
  40.         }
  41.       })
  42.     }
  43.   },
  44.   //图片预览
  45.   previewImage: function (e) {
  46.     var img_srcs = this.data.img_srcs;
  47.     var index = e.target.dataset.index;
  48.     wx.previewImage({
  49.       current: img_srcs[index],
  50.       urls: img_srcs           // 需要预览的图片http链接列表
  51.     })
  52.   },
  53.   //删除内容快
  54.   deletTap: function (e) {
  55.     var that = this;
  56.     console.log(e)
  57.     var index = e.currentTarget.dataset.index;
  58.     var content = that.data.content;
  59.     wx.showModal({
  60.       title: '提示',
  61.       content: '确定要删除？',
  62.       success: function (res) {
  63.         if (res.confirm) {
  64.           content.splice(index, 1)
  65.           that.setData({
  66.             content: content,
  67.           })
  68.         }
  69.       }
  70.     })
  71.   },

 

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

  1.    /**
  2.    * 页面的初始数据
  3.    */
  4.   data: {
  5.     sortCurrent: '',//
  6.     upload_limit: 1,// 默认最多上传9张
  7.     img_srcs: [], //如果是编辑状态，只需要把原信息的图片地址放到此处就可以显示出来
  8.     img_src: [],
  9.  
  10.     content: [],//正文内容
  11.     textreaHidden: true,
  12.     addHidden: false,
  13.     editVal: '',//编辑文字内容
  14.     editIndex: '',//编辑的index
  15.     userZoneList: [],//城市列表
  16.     index2: '',//城市下标
  17.   }, 
  18.  
  19. //发布提交信息
  20.   formSubmit: function (e) {
  21.     var that = this;
  22.     console.log(that.data);
  23.     var userInfo = wx.getStorageSync('userInfo');    //用户基本信息
  24.     //console.log(e.detail.value)   //表单中input的值
  25.     var city = e.detail.value.city;      //所在城市
  26.     var area = e.detail.value.area;      //房屋面积
  27.     var phoneNumber = e.detail.value.phoneNumber;     //手机号
  28.     var userName = e.detail.value.userName;    //姓名
  29.     var arr = {             //将正文内容传到data中
  30.       "content": that.data.content
  31.     }
  32.     var mobile = /^[1][3,4,5,7,8][0-9]{9}$/;
  33.     var isMobile = mobile.exec(e.detail.value.phoneNumber)  //校验手机号
  34.  
  35.     //所有消息有任一为空时
  36.     if (city == "" || area=="" || phoneNumber=="" || userName=="") {
  37.       wx.showModal({
  38.         title: '发布提示',
  39.         content: '您的信息缺失，请重新填写！',
  40.         showCancel: false,
  41.         success: function (res) {
  42.           if (res.confirm) {
  43.             return false;
  44.           }
  45.         }
  46.       })
  47.       wx.hideNavigationBarLoading();
  48.     }
  49.     //判断电话号格式是否正确
  50.     else if (!isMobile) {
  51.       console.log('form表单发生点击事件，携带的数据为：', e.detail.value)
  52.       console.log('电话：', e.detail.value.phoneNumber)
  53.         wx.showModal({
  54.           title: '提示！！',
  55.           content: '你输入的电话不符，请重新检查填写',
  56.          })
  57.     }
  58.     //当所有消息不为空
  59.     else {
  60.       //判断主要内容
  61.       console.log(arr.content.length);
  62.       if (arr.content.length == 0){
  63.         wx.showModal({
  64.           title: '发布提示',
  65.           content: '文章内容不能为空，请编辑内容',
  66.           showCancel: false,
  67.           success: function (res) {
  68.             if (res.confirm) {
  69.               return false;
  70.             }
  71.           }
  72.         })
  73.         wx.hideNavigationBarLoading();
  74.       }else{
  75.         wx.request({
  76.           url: app.d.hostUrl + 'activity.addApply',
  77.           data: {
  78.             "openid": wx.getStorageSync('openid'),
  79.             "nickname": userInfo.nickName,   //昵称
  80.             "avatar": userInfo.avatarUrl,  //头像
  81.             "name": e.detail.value.userName,  //姓名
  82.             "zone": e.detail.value.city,   //城市
  83.             "area": e.detail.value.area,   //手机号
  84.             "tel": e.detail.value.phoneNumber,   //手机号
  85.             "content": arr,  //内容
  86.           },
  87.           method: 'GET',
  88.           header: {
  89.             'Accept': 'application/json'
  90.           },
  91.           success: function (res) {
  92.             console.log(res)
  93.             wx.hideNavigationBarLoading();
  94.             wx.showToast({
  95.               title: '已提交报名',
  96.               icon: 'success',
  97.               duration: 2000,
  98.               success: function () {
  99.                 setTimeout(function () {
  100.                   wx.reLaunch({
  101.                     url: '/pages/activity/home/home',
  102.                   })
  103.                 }, 2000)
  104.               }
  105.             })
  106.           }
  107.         })
  108.       }
  109.     }
  110.   },

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

 

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号