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

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

一、使用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模板网!

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

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

相关文章

  • 编写一个微信小程序,实现表单提交数据到云数据库

    好的。 首先,你需要在微信公众平台中创建一个小程序,并在小程序的后台获取到云开发的相关权限。然后你就可以使用微信小程序开发工具进行开发了。 在页面中创建一个表单,并在表单中添加输入框和提交按钮。 在小程序的 app.js 文件中初始化云开发环境。 在表单的提

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    2024年02月06日
    浏览(47)
  • 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日
    浏览(86)
  • 微信小程序表单验证方式

    因微信小程序上没有自带表单验证,为了实现和vue的组件库类似于的表单验证,这个时候我们就需要借鉴一个文件WxValidate表单验证的js插件,以下只是做个列子,需要更多验证请往官网文档查看 插件下载地址及官方文档:https://github.com/skyvow/wx-extend 具体的WxValidate.js文件的位置在

    2024年02月09日
    浏览(42)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包