微信小程序-表单提交和校验

news2025/1/17 0:53:43

一、使用vant组件生成如下页面

在这里插入图片描述
二、前端代码如下

 <form bindsubmit="submitForm">
    <view class="cell-group">
      <van-cell-group>
        <van-field value="{{ title }}" label="商品名称" placeholder="请输入商品名称" input-align="left" bind:change="onChangeTitle" />
        <van-field value="{{ price }}" label="商品价格" placeholder="请输入商品价格" input-align="left" bind:blur="onChangePrice" />
        <van-field value="{{ desc }}" label="商品描述" placeholder="请输入商品描述" input-align="left" bind:change="onChangeDesc" />
      </van-cell-group>
    </view>
    <view class="image-container">
      <label for="productImage"></label>
      <van-button icon="plus" type="primary" bindtap="chooseImage">点击选择图片</van-button>
      <view class="image-preview-container">
        <image wx:if="{{productImage}}" src="{{productImage}}" mode="aspectFit" bindtap="previewImage"></image>
      </view>
    </view>
    <view class="form-buttons">
      <van-button plain type="primary" formType="submit">确定</van-button>
      <van-button plain type="info">取消</van-button>
    </view>
  </form>

用form块宝珠van-cell-group组件， 
van-button 中from-type= "submit"
form表单的bindsubmit="submitForm" 是js中执行方法

三、对于每一个van-field 组件都有自己的绑定函数

当输入信息后则会把数据实时绑定到js中的data中

bind:change=“onChangeTitle” // 改变时
bind:blur=“onChangePrice” // 焦点变化时

四、如果需要校验，也可以在onChangeTitle，或者最后提交表单时候统一处理

  data: {
    productImage: null , // 存储选择的商品图片的临时路径
    title: '',
    price: '',
    desc: '',
    url: ''
  },

onChangeTitle(event) {
    this.setData({
      title: event.detail
    });
  },

  onChangePrice(e) {
    var value = e.detail.value;
    // 验证是否数字、正整数或小数
    var reg = /^\d+(\.\d+)?$/;
    if (!reg.test(value)) {
        wx.showToast({
          title: '请输入数字，可以是正整数或小数',
          icon: 'none',
          duration: 3000
        });
        this.setData({
          price: ''
        });
    }
      // 这块是正常逻辑需要赋值
       this.setData({
      price: value
    });
  },

表单提交

submitForm: function (e) {
    console.log("form发生了绑定事件，数据为 ",this.data)
    if(!this.data.title){
      wx.showToast({
        title: '商品名称不能为空',
        icon : 'none',
        duration: 2000
      })
      return;
    }
    if(!this.data.price){
      wx.showToast({
        title: '商品price不能为空',
        icon : 'none',
        duration: 2000
      })
      return;
    }
    if(!this.data.desc){
      wx.showToast({
        title: '商品desc不能为空',
        icon : 'none',
        duration: 2000
      })
      return;
    }
    if(!this.data.url){
      wx.showToast({
        title: '商品图片不能为空',
        icon : 'none',
        duration: 2000
      })
      return;
    }
    let publishData = {
      title:this.data.title,
      price:this.data.price,
      desc: this.data.desc,
      image :this.data.url,
      userId: `${userId}`
    }