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

最新推荐文章于 2024-03-21 11:32:52 发布

hikarilee

最新推荐文章于 2024-03-21 11:32:52 发布

阅读量1.1k

点赞数 8

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/hikarilee/article/details/136168235

版权

本文介绍了如何在微信小程序中使用 vant 组件创建表单，并详细说明了每个 van-field 组件的绑定函数，如 onChangeTitle 和 onChangePrice，用于实时绑定数据。同时，文章提到了两种校验方式：在字段变化时单独校验或在表单提交时统一处理。适合前端初学者参考。

摘要由CSDN通过智能技术生成

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