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

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

一、使用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}`}