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

这篇具有很好参考价值的文章主要介绍了微信小程序-表单提交和校验。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

初学前端,不对处请指正!文章来源地址https://www.toymoban.com/news/detail-831873.html

到了这里,关于微信小程序-表单提交和校验的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序:服务器请求、上传图片和提交表单开发完整代码实例

    该示例涉及服务器请求、上传图片、展示上传的图片,并提交表单,同时配合使用 WXML(微信小程序的前端页面结构)、WXSS(样式表)、以及 JavaScript(逻辑控制)。请注意,服务器端的实现将不在本示例范围内,您需要根据实际需求创建后端 API 来处理请求和上传的操作。

    2024年02月06日
    浏览(53)
  • 微信小程序学习实录1(wxml文档、引入weui、双向数据绑定、提交表单到后端)

    wx:for 在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。 默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item 使用 wx:for-item 可以指定数组当前元素的变量名, 使用 wx:for-index 可以指定数组当前下标的变量名: 在

    2024年02月02日
    浏览(63)
  • #微信小程序# #uni-app# 实现提交表单或登录,需勾选同意协议,才可以进行下一步

    一、需求: 实现提交表单或登录,需勾选同意协议,才可以进行下一步 二、步骤/思路: (1)使用uni-app的组件checkbox-group排出勾选协议版面   (2)设置一个多选框的数组,绑定在u-checkbox-group里, 使用这个数组来进行判断是否勾选了用户协议 (3)设置点击事件toBngling(),写

    2024年02月12日
    浏览(52)
  • uniapp表单校验和提交

    明显已经校验并提交到服务器,得到数据返回 uniapp完整代码 用到u-view ui框架(推荐,确实好看),链接

    2024年02月16日
    浏览(40)
  • uniapp APP、H5和微信小程序 使用百度地图,H5动态加载百度地图sdk,cover-image图片不显示,标准基座模拟器地图不显示,表单校验字段[‘**‘]在数据库中不存在

    APP里面的几个注意项 在百度地图开放平台申请密匙,在manifest.json App模块配置的地图模块选择百度地图并填入申请到的appkey。 页面使用uniapp的map标签,要在地图上面覆盖图片、内容等,使用cover-image、cover-view,因为map是原生组件,覆盖的内容有时不显示,使用v-if控制(这里

    2024年02月11日
    浏览(61)
  • vue实现多个el-form表单提交统一校验

    通过以下两种方法实现多个表单的统一校验: 1. 定义模板内容 在 el-form 表单中添加 ref 属性来获取表单组件对象 2. 方法一 在上述代码中,我们给每个 el-form 表单添加了 ref 属性,分别为 form1 和 form2,在 submit 方法中,分别对两个表单使用 validate 方法进行表单校验 3. 方法二

    2024年02月13日
    浏览(44)
  • 【实操】vue+element UI tab页多表单合并校验提交

    一个页面中tab栏切换多个form表单组件,只有一个保存按钮。需要把各组件下的表达数据合并校验提交。 父组件通过两次调用$refs获取子组件的dom元素以及组件内部form的dom元素。 通过循环表单项获取validate值获取校验结果,通过Promise.all合并表单。 子组件内部getData方法返回表

    2024年02月11日
    浏览(42)
  • Element ui form表单上传图片以及图片回显后提交表单validate校验失败

    1.页面加载时,由于接口响应参数赋值给初始化form表单的值时,造成初始化的imageCode值丢失。 下面展示一些 内联代码片 。 第一种情况 form表单赋值不正确 1.接口请求数据后直接赋值,导致imageCode属性丢失 说明 1.不能直接采用this.form=data;给form赋值,返回接口中没有imageCode时

    2024年02月06日
    浏览(44)
  • vue3 antd项目实战——Form表单的提交与校验【v-model双向绑定input输入框、form表单数据,动态校验规则】

    本文依旧沿用 ant design vue 组件库和 ts 语言🔥🔥更多内容见Ant Design Vue官方文档 🔥🔥 vue3 antd项目实战——Form表单【后台管理系统 v-model数据的双向绑定,input输入框、Radio单选框的嵌套使用】 在上期文章中,我们完成了 UI界面的渲染 (渲染效果如下图),本期文章将带着大

    2023年04月22日
    浏览(84)
  • 微信小程序常用表单组件

       button 为按钮组件,是常用的表单组件之一,用于事件的触发以及表单的提交。其属性表如下所示。 代码示例:    checkbox 为复选框组件,常用于在表单中进行多项数据的选择。复选框的 checkbox-group 为父控件,其内部嵌套若干个 checkbox 子控件。    checkbox-group 属性如

    2024年02月09日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包