form表单的提交以及触发方式

最新推荐文章于 2025-01-18 08:08:05 发布

Huang_John

最新推荐文章于 2025-01-18 08:08:05 发布

阅读量9.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： Ĵ小程序文章标签： form表单

本文链接：https://blog.youkuaiyun.com/Huang_John/article/details/83276056

Ĵ小程序专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍如何在小程序中使用form表单组件实现商品发布功能，包括表单元素的布局、图片上传、输入验证及表单提交流程。通过具体代码示例，展示如何设置表单事件、触发表单提交并进行页面跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序里面有form表单组件，提交表单通过button提交，在form标签里添加bindsubmit事件，然后在button标签里面添加触发bindsubmit事件的属性：form-type=“submit”，就可以将表单提交到服务器了，需要注意的是button必须是要在form标签里面，例如：

<form bindsubmit="test">
		<button form-type="submit"></button>
</form>

提交表单的后续的操作写在bindsubmit事件里面：

test:function(){
	wx.navigateTo({
        url: '../../index/index',
      })
}

这样点击button按钮时表单就已经提交上去了，并且随后会自动跳转到index界面，上一段结合weui工具写的发布商品的代码吧，wxml：

<form bindsubmit='release'>
    <input class='ipt1' placeholder='为您的宝贝添加个诱人的标题吧（不超过30字）'></input>
    <textarea class='ipt2' placeholder='更详细的介绍可以帮助更快送出，如品牌、市场价格、尺码、送出原因等（不少于10个字）'></textarea>
    <view class="page__bd">
        <view class="weui-cells">
            <view class="weui-cell">
                <view class="weui-cell__bd">
                    <view class="weui-uploader">
                        <view class="weui-uploader__hd">
                            <view class="weui-uploader__title">上传图片</view>
                            <!-- <view class="weui-uploader__info">{{files.length}}/9</view> -->
                        </view>
                        <view class="weui-uploader__bd">
                            <view class="weui-uploader__files" id="uploaderFiles">
                                <block wx:for="{{files}}" wx:key="*this">
                                    <view class="weui-uploader__file" bindtap="previewImage" id="{{item}}">
                                        <image class="weui-uploader__img" src="{{item}}" mode="aspectFill" />
                                    </view>
                                </block>
                            </view>
                            <view class="weui-uploader__input-box">
                                <view class="weui-uploader__input" bindtap="chooseImage"></view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
    <navigator url="/pages/address/address" open-type="navigateTo" class='order-bar' hover-class='none'>
      <view class='order-list'>
        <text>地址</text>
      </view>
      <image src='../../img/right-bar.svg'></image>
    </navigator>
    <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_switch">
            <view class="weui-cell__bd" style='font-size:30rpx;color:#333;height:80rpx;padding:0rpx;line-height:65rpx'>全新</view>
            <view class="weui-cell__ft" style='font-size:30rpx;color:#333;height:80rpx;padding:0rpx;line-height:60rpx'>
                <switch />
            </view>
        </view>
    </view>
    <view class='price'>
        <view class='price1'>
            <view class='price1-text1'>一口豆</view>
            <view class='price1-text2'>竞拍</view>
        </view>
        <view class='price2'>
            <view class='price2-text1'>一口豆</view>
            <view class='price2-text2'>朵</view>
            <input class='p-ipt' placeholder='50'></input>
        </view>
        <navigator url='../product-list/product-list' class='price3'>
            <view class='price2-text1'>分类标签</view>
            <image src='../../img/right-bar.svg' class='p-img'></image>
            <view class='price2-text2'>请选择分类</view>
        </navigator>
        <view class='price3'>
            <view class='price2-text1'>上门快递</view>
            <image src='../../img/right-bar.svg' class='p-img'></image>
            <view class='price2-text2'>普通快递</view>
        </view>
    </view>
    <button class='btn' form-type='submit'>发布宝贝</button>
</form> 
<view class='foot'></view>

wxss:

/* pages/release/release.wxss */

.ipt1{
  font-size: 24rpx;
  padding: 30rpx;
  border-bottom: 1rpx #f4f4f4 solid;
}
.ipt2{
  font-size: 24rpx;
  height: 150rpx;
  width: 690rpx;
  padding: 30rpx
}
.order-bar{
  height: 80rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30rpx;
  color: #333;
  background: #fff;
  font-size: 30rpx;
  margin-top: 5rpx;
  border-bottom: 1rpx #f4f4f4 solid;
}
.order-bar image{
  width: 32rpx;
  height: 32rpx;
  margin-right:14rpx; 
}
.order-list{
  display: flex;
  align-items: center;
}
.price1{
  margin-top: 30rpx;
  height: 60rpx;
  width: 690rpx;
  padding: 0 30rpx;
  display: flex;
}
.price1-text1{
  flex: 1;
  font-size: 24rpx;
  color: #FC3636;
  text-align: center;
  line-height: 60rpx;
  border: 1rpx #FC3636 solid;
  border-radius: 30rpx;
  background: rgba(252, 54, 54, 0.034);
}
.price1-text2{
  flex: 1;
  font-size: 24rpx;
  color: #666;
  text-align: center;
  line-height: 60rpx;
  border: 1rpx #666 solid;
  border-radius: 30rpx;
}
.price2{
  height: 80rpx;
  width: 690rpx;
  padding: 0 30rpx;
  font-size: 24rpx;
  line-height: 80rpx;
  color: #333;
  margin-top: 35rpx;
  border-bottom: 1rpx #f4f4f4 solid;
}
.price2-text1{
  float: left;
}
.p-ipt{
  float: right;
  width: 100rpx;
  text-align: right;
  margin-right: 10rpx;
  height: 80rpx;
  line-height: 80rpx;
}
.price2-text2{
  float: right;
}
.price3{
  font-size: 24rpx;
  color: #333;
  width: 690rpx;
  padding: 0 30rpx;
  line-height: 80rpx;
  height: 80rpx;
  border-bottom: 1rpx #f4f4f4 solid;
}
.p-img{
  height: 80rpx;
  width: 30rpx;
  display: block;
  float: right;
  margin-left: 10rpx;
}
.btn{
  height: 80rpx;
  width: 100%;
  text-align: center;
  position: fixed;
  bottom: 0;
  background: #FC3636;
  line-height: 80rpx;
  color: #fff;
  font-size: 32rpx;
}
.foot{
  height: 200rpx;
  width: 100%;
}

js:

// pages/release/release.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    files: []
  },

  chooseImage: function (e) {
    var that = this;
    wx.chooseImage({
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        that.setData({
          files: that.data.files.concat(res.tempFilePaths)
        });
      }
    })
  },
  previewImage: function (e) {
    wx.previewImage({
      current: e.currentTarget.id, // 当前显示图片的http链接
      urls: this.data.files // 需要预览的图片http链接列表
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

预览效果：
在这里插入图片描述