一、使用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
});
},
表单提交文章来源:https://www.toymoban.com/news/detail-831873.html
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}`
}
初学前端,不对处请指正!文章来源地址https://www.toymoban.com/news/detail-831873.html
到了这里,关于微信小程序-表单提交和校验的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!